Depois de muita tentativa consegui o que queria. Nesse caso, trago os dados do banco e exibo em formas de botões e inputs que esta dentro do DO WHILE do php abaixo. O código javascript manipula os dados contidos dentro do inputs na qual foi selecionado.
<script>
function mostrar(btn) {
const div = btn.closest('div');
var tx_id = div.querySelector('[name="tx_id"]').value;
var div_R = document.getElementById(tx_id);
if(!div_R){
var div_c = document.createElement("DIV");
div_c.id = tx_id;
div_c.style.width = "95%";
div_c.style.height = "35px";
div_c.style.margin = "30px 10px";
div_c.style.background = "#ffe0e0";
div_c.innerHTML = "ID: <input name='v4' id='v4' type='text' size='2' value='' /> Produto: <input name='v1' id='v1' type='text' value='' /> Quantidade: <input name='v2' id='v2' type='text' value='' size='2' /> Preço: <input name='v3' id='v3' type='text' value='' size='10' /> Sub-total: <input name='v5' id='v5' type='text' value='' size='10' />";
document.getElementById("main").appendChild(div_c);
var t1 = div.querySelector('[name="tx1"]').value;
var t2 = div.querySelector('[name="tx2"]').value;
var t3 = div.querySelector('[name="tx3"]').value;
var t4 = div.querySelector('[name="tx_sub_t"]').value;
div_c.querySelector('[name="v1"]').value = t1;
div_c.querySelector('[name="v2"]').value = t2;
div_c.querySelector('[name="v3"]').value = t3;
div_c.querySelector('[name="v4"]').value = tx_id;
div_c.querySelector('[name="v5"]').value = t4;
}else{
//Atualiza o dado do INPUT quantidade dos botões
var num_1 = div.querySelector('[name="tx2"]').value;
var soma1 = parseInt(num_1) + 1;
div.querySelector('[name="tx2"]').value = soma1;
//Atualiza o dado do INPUT subtotal dos botões
var tx_val_1 = div.querySelector('[name="tx3"]').value;
var tx_val_2 = div.querySelector('[name="tx_sub_t"]').value;
var soma2 = (parseInt(tx_val_1) + parseInt(tx_val_2)).toFixed(2);
div.querySelector('[name="tx_sub_t"]').value = soma2;
//Atualiza o dado dos INPUTS da DIV criada pela função
div_R.querySelector('[name="v2"]').value = soma1;
div_R.querySelector('[name="v5"]').value = soma2;
}
}
</script>
<?php do { ?>
<div>
<input name="tx_id" type="text" value="<?php echo $row_Recordset1['id']; ?>" size="2" style="background:#F96" />
<input name="tx1" type="text" value="<?php echo $row_Recordset1['nome']; ?>" />
<input name="tx2" type="text" value="1" />
<input name="tx3" type="text" value="<?php echo $row_Recordset1['preco']; ?>" />
<input name="tx_sub_t" type="text" value="<?php echo $row_Recordset1['preco']; ?>" />
<button name="btn" id="btn" type="button" onclick="mostrar(this)"><?php echo $row_Recordset1['nome']; ?></button>
</div>
<?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
<div id="main"></div>