JSFiddle - React, Tailwind, and code Playground

by dife

HTML

<fieldset id="listproducts">  
<legend> PRODUCTS </legend>
 <div id = 'forclone'>
               <select name="product" id="product">
                <optgroup label="GALLON BAG">
                   <option value="GALLON BAG BANANA SPLIT">GALLON BAG BANANA SPLIT</option>
                    <option value="GALLON BAG BIRTHDAY CAKE">GALLON BAG BIRTHDAY CAKE</option>
                    <option value="GALLON BAG COTTON CANDY">GALLON BAG COTTON CANDY</option>
                </optgroup>
            </select>
            <select name="quantity" id="quantity">
                    <optgroup label="Qty">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                      </optgroup>
            </select>
            <button class="btn">Inserir</button>
            </div>  
</fieldset> 

<div id="pedidos">
    <fieldset class="pedidos">  
        <legend> Pedidos </legend>
        <table class="tbl_pedidos">
            <th>Produto</th>
            <th>Quantidade</th>
            <tbody>
              
            </tbody>
        </table> 
</fieldset>
</div>
<button class="btn_confirmar">Confirmar Pedido</button>

CSS

.tbl_pedidos th{
  width: 90%;
  background: red;
}

.tbl_pedidos tbody{
  width: 90%;
  background: green;
}

.tbl_pedidos tbody td.qtd{
  width: 50px;
}

/*linhas ímpares*/
.tbl_pedidos tr:nth-child(odd) {
    background-color: #c1d7d7;
}

/*linhas pares*/
.tbl_pedidos tr:nth-child(even) {
    background-color: #ccff66;
}

JavaScript

$(document).ready(function(){
			$(".btn").on('click', function(e){
				e.preventDefault();
          
      	//armazena os valores vindo do select
  			var product = $('#product').val();
  			var qtd = $("#quantity").val();
              
  			//array vazio
      	var compras  = [];
          
     		//insere o produto e a quantidade no array
     		compras.push(product);
     		compras.push(qtd);
          
     		//cria a linha td com os valores na tabela
     		var lista = '<tr><td>' + compras[0] + '</td><td class="qtd">'+ compras[1] + '</td></tr>';
          
     		//insere a lista dentro de tbody
     		$(".tbl_pedidos > tbody:last-child").append(lista);
              
     		//ação de quando clicar no confirmar pedido
     		$(".btn_confirmar").on('click', function(){
          
     		//cria o vetor de produtos e quantidade
     		var dados = {product: compras[0], quantity: compras[1]};
     		var dados_pedidos = [];

     		//insere cada pedido em um índice do vetor
      	$.each(dados, function( produtos, quantidade ) {
					var data = produtos + ":" + quantidade;
         	dados_pedidos.push(data);   
      	});

      	//unifica o vetor de pedidos
     		 var lista_final = dados_pedidos.join(", ");

      	//mostra o que seria enviado por ajax
      	 alert(lista_final);
				});        
  	});
 });