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
function recalcular(item, qtd) {
    prod_array[item] = qtd;
    var string = '';
    for (var prod in prod_array) {
        if (prod_array[prod]) string += '[' + prod + '][' + prod_array[prod] + ']';
    }
    $('#products_array').val(string);
    console.log("novo produto adicionado :)");
    console.log($('#products_array').val());
}
$('#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'><i class='icon-remove-small'>remover</i></a>"; // Link para remover o produto
    // 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>");
    recalcular(list, quant, true);
});

// 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 produto = $(this).closest('tr').find('td').eq(0).text();
        recalcular(produto, 0);
        $(this).closest('tr').remove();
        console.log("produto removido :(");
    } else if (dialog == false) {
        console.log("produto mantido :O");
    }
});