JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="row">
    <div class="col-md-12">
        	<h2 class="sub-title text-center">Escolha os produtos e a quantidade que deseja orçar e clique em adicionar a lista.</h2>

    </div>
</div>
<div class="row">
    <div class="col-md-7">
        <label for="">Produtos</label>
        <select name="produtos" id="lista_produtos">
            <option value="selecione...">Selecione...</option>
            <option value="value 1">value 1</option>
            <option value="value 2">value 2</option>
            <option value="value 3">value 3</option>
        </select>
    </div>
    <div class="col-md-2 push-1">
        <label for="quant_produtos">Qtd</label>
        <input type="text" id="quant_produtos" name="amount" value="1">
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <button type="button" id="add_produto" class="btn btn-primary push-8">adicionar à lista</button>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="products-table">
            <table border="0" width="100%" cellpadding="5" cellspacing="0" id="cesta_produtos" class="table table-striped">
                <thead>
                    <tr>
                        <td width="45%">Produto</td>
                        <td width="45%">Quatidade</td>
                        <td width="10%">Remover</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="3" align="center" id="cesta_vazia">nenhum produto adicionado</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <input type="hidden" name="products_array" id="products_array" value="">
</div>
<div class="row">
    <div class="col-md-12">
        <button type="submit" class="btn btn-default">ENVIAR</button>
    </div>
</div>
</form>
<!-- /[cotacao] -->
</main>

CSS

table {
    width: 90%;
    margin-top: 40px;
}
table thead {
    background: green;
    color: #fff;
}
select {
    padding: 5px;
}

JavaScript

prod_array = []; // Array de produtos

$('#add_produto').on('click', function () {

    var table = $('#cesta_produtos tbody'), // Tabela de produtos

        list = $('#lista_produtos').val(), // Select com a lista de produtos

        quant = $('#quant_produtos').val(), // Campo com a quantidade de produtos

      remove = "<a href='#' class='del_produto'>Remover<i class='icon-remove-small'></i></a>", 
      // Link para remover o produto

    input_hidden = $('#products_array');


    // Remove a mensagem de cesta vazia depois que produto é adicionado
    $('#cesta_vazia').remove();

    // Insere o produto selecionado no select list dentro da tabela
    table.append("<tr><td class='produto'>" + list + "</td><td class='quantidade'>" + quant + "</td><td>" + remove + "</td></tr>");

    prod_array.push("[" + list + "]" + "[" + quant + "]");

    input_hidden.val(prod_array);

    console.log("novo produto adicionado :)");

    console.log(input_hidden.val());

});

// Remoção de produtos da tabela
$(document).on('click', '.del_produto', function (e) {
    e.preventDefault();

    // Janela de confirmação de exclusão do item
    var dialog = confirm("Clique 'OK' para remover o produto, ou 'cancelar' para mantê-lo na lista.");

    if (dialog == true) {
        var tr = $(this).closest('tr');
        var list = tr.find('td').eq(0).text();
        var quant = tr.find('td').eq(1).text();
        var index = prod_array.indexOf("[" + list + "]" + "[" + quant + "]");
        prod_array.splice(index, 1);
        tr.remove();
        console.log("produto removido :(");
        console.log(prod_array);

    } else if (dialog == false) {

        console.log("produto mantido :O");
        console.log(prod_array);

    }
});