JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<thead>
<th>id</th>
<th>Qtd</th>
<th>Preço</th>
<th>Total</th>
</thead>
<tbody id='input_stock_product'></tbody>
</table>
Produto:
<select id="product">
<option id="1">Produto 1</option>
<option id="2">Produto 2</option>
<option id="3">Produto 3</option>
</select>
Qtd: <input name="amount" type="number">
Preço: <input name="price" type="text">
<button id="add">
Adicionar Produto
</button>
<br><br><br>
<button id="getAll">
Pegar valores da tabela
</button>
<div id="resultado">
</div>
</div>
JavaScript
$("#add").click(function(){
var newRow = $('<tr class="productRow">');
var cols = "";
cols += '<td class="tdProductId" id='+ $("#product option:selected").attr("id") +'>'+ $("#product option:selected").text() +'</td>';
cols += '<td class="tdProductAmount">'+ $("input[name=amount]").val() +'</td>';
cols += '<td class="tdProductPrice">'+ $("input[name=price]").val() +'</td>';
cols += '<td class="tdProductTotal">'+ $("input[name=price]").val() * $("input[name=amount]").val() +'</td>';
cols += '<td>';
cols += '<a href="#" class="removeProduct">Remover</a>';
cols += '</td>';
newRow.append(cols);
$("#input_stock_product").append(newRow);
})
$("#getAll").click(function(){
var productsData = [];
$(".productRow").each(function(i){
var pData = {
id_product: $(this).find(".tdProductId").attr("id"),
amount: $(this).find(".tdProductAmount").text(),
price: $(this).find(".tdProductPrice").text(),
total: $(this).find(".tdProductTotal").text()
};
productsData.push(pData);
});
$("#resultado").html(JSON.stringify(productsData));
})