JSFiddle - React, Tailwind, and code Playground

by StepBaro

HTML

code: <input id="code" type="text"/><br/><br/>
qty: <input id="qty" type="text"/><br/><br/>
<br/>
<button id="add">Add</button>
<br/>
<table id="productlist" style="width:300px;border:solid 1px black;">
	<tbody>
		
	</tbody>
</table>

JavaScript

products = {};

$('#add').click(function() {

	var c = $('#code').val();
	var q = $('#qty').val();


  var $row = $(
    "<tr style='text-align: center;'>" +
    "	<td width='80%'>" + c + "</td>" +
    "	<td class='qty' width='20%'>" + q + "</td>" +
    "</tr>"
  );
	
	var exists = false;
	$('#productlist tbody tr').each(function(){
		if ($(this).data('procode') == c) {
			exists = true;
			$(this).data('qty', parseInt(q) + parseInt($(this).data('qty')));
			$('.qty', this).html($(this).data('qty'));
		}
	});
	
	if (!exists) {
  	$row.data("procode", c);
  	$row.data("qty",q);
  	$('#productlist tbody').append($row);
	}
});