JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr><th>PID</th><th>Description</th><th>Add To Cart</th></tr>
<tr id="tr_1"><td>1</td><td>Shampoo</td><td><button class="btnAddToCart">Add to cart</button></td></tr>
<tr id="tr_2"><td>2</td><td>Real Poo</td><td><button class="btnAddToCart">Add to cart</button></td></tr>
<tr id="tr_3"><td>3</td><td>Dish Soap</td><td><button class="btnAddToCart">Add to cart</button></td></tr>
</table>
<button id="btnCheckout">Check Out</button>
<br><br><br>
<form id="tcform" method="post" action="wherever.php">
	<input type="text" id="tempcart" />
</form>

CSS

table{border-collapse:collapse;}
th,td{border:1px solid #ddd;}
.added{background:palegreen;}

JavaScript

$('.btnAddToCart').click(function(){
	$(this).prop('disabled',true);
	var tr = $(this).closest('tr');
	var id = tr.attr('id').split('_')[1];
	tr.addClass('added');
	$('#tempcart').val( $('#tempcart').val() +'|'+id );
});

$('#btnCheckout').click(function(){
	$('#tcform').submit();
	alert('Submitted');
});