JSFiddle - React, Tailwind, and code Playground
HTML
<h2>Menu</h2>
<table id="centerElem">
<thead>
<tr>
<td>Product ID</td>
<td>Name</td>
<td>Description</td>
<td>Ingredients</td>
<td>type</td>
<td>price</td>
<td>Qty</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="item_id" value="0001" disabled /></td>
<td><input type="text" class="item_name" value="Rice" disabled /></td>
<td>white parboiled rice</td>
<td>rice</td>
<td>none</td>
<td><input type="text" class="item_price" value="300" disabled /></td>
<td><input id="qty_0001" class="item_qty" name="qty_0001" type="text" placeholder="how mant you want?" /></td>
</tr>
<tr>
<td><input type="text" class="item_id" value="0002" disabled /></td>
<td><input type="text" class="item_name" value="Beans" disabled /></td>
<td>parboiled beans</td>
<td>beans an d salt</td>
<td>none</td>
<td><input type="text" class="item_price" value="400" disabled /></td>
<td><input id="qty_0002" class="item_qty" name="qty_0002" type="text" placeholder="how mant you want?" /></td>
</tr>
</tbody>
</table>
<button id="addToCart">Add To Cart</button>
<h2>Cart</h2>
<TABLE id="orderTable" style="width:100%; border-collapse:collapse; border: solid 1px #000000">
<thead>
<tr>
<td>Product ID</td>
<td>Name</td>
<td>Qty</td>
<td>Price</td>
<td>Sub Total</td>
<td>Remove</td>
</tr>
</thead>
<TBODY>
<tr class="item">
<td><input type="text" class="order_item_id" value="0001" disabled /></td>
<td>Rice</td>
<td><input type="text" class="order_item_qty" value="2" /></td>
<td><input type="text" class="order_item_price" value="300"...
CSS
input:disabled{
border:none;
width:40px;
}
JavaScript
$('#addToCart').click(addItems);
$('#updateCart').click(updateCart);
function addItems(){
var somethingChangedOrAdded = false;
// for each item on the menu
$('#centerElem tbody tr').each(function(){
var item_id = $(this).find('.item_id').val();
var item_name = $(this).find('.item_name').val();
var item_qty = $(this).find('.item_qty').val();
var item_price = $(this).find('.item_price').val();
// if the customer has ordered any of the item
if(parseInt(item_qty) > 0){
somethingChangedOrAdded = true;
var item_found = false;
// check if we already have the item in the cart
$('#orderTable tbody tr.item').each(function(){
var order_item_id = $(this).find('.order_item_id').val();
var order_item_qty = $(this).find('.order_item_qty');
if(item_id === order_item_id){
item_found = true;
// item found in cart so update value
order_item_qty.val(parseInt(order_item_qty.val())+parseInt(item_qty));
}
});
// if we didnt find the item already in the cart
if(!item_found){
var output = '';
output += '<tr class="item">';
output += '<td><input type="text" class="order_item_id" value="'+item_id+'" disabled /></td>';
output += '<td>'+item_name+'</td>';
output += '<td><input type="text" class="order_item_qty" value="'+item_qty+'" /></td>';
output += '<td><input type="text" class="order_item_price" value="'+item_price+'" disabled /></td>';
output += '<td><input type="text" class="order_item_subtotal" value="" disabled /></td>';
output += '<td><input type="checkbox" class="remove_item" /></td>';
output += '</tr>';
$('#orderTable tbody...