JSFiddle - React, Tailwind, and code Playground

HTML

<table><thead>
    <th>Item</th><th>Price</th><th>Add</th></thead><tbody>
    <tr id="guitar"><td>Guitar</td><td>500</td><td><input type="checkbox" /></td></tr>
    <tr id="sofa"><td>Sofa</td><td>800</td><td><input type="checkbox" /></td></tr>
    <tr id="desk"><td>Desk</td><td>300</td><td><input type="checkbox" /></td></tr>
    <tr id="chair"><td>Chair</td><td>100</td><td><input type="checkbox" /></td></tr>
    </tbody></table>
<input type="text" id="hiddenInput" />
<input type="button" id="mybutt" value="Order" />

CSS

table{border-collapse:collapse;}
th,td{border:1px solid #ccc;}

#hiddenInput{width:100%;margin:20px 0;border:none;background:wheat;}

JavaScript

var qty, item, basket={};
var hidInput = $('#hiddenInput');

$('input[type="checkbox"]').click(function(){
    qty = prompt('How many?');
//    alert(qty);
    tmp = hidInput.val();
    basket = (tmp=='') ? {} : JSON.parse( tmp );
    item = $(this).closest('tr').attr('id');
//    alert(item);
    basket[item] = qty;
    tmp = JSON.stringify(basket);
    //alert(tmp);
    hidInput.val( tmp );
});