JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<form method="get" action="here" onsubmit="">
		<input type="text" id="pname" name="pname" value="Product Name"/>
		<input type="number" id="pqty" name="pqty" value="3"/>
		<input type="text" id="pprice" name="pprice" value="2.80"/>
		<input type="text" id="totalpprice" name="totalpprice" value="" readonly/>
		<input type="button" id="padd" name="padd" value="add"/>
	</form>

<ol id="addhereform">
<li></li>
</ol>

</body>

CSS

#pname
{
    width:120px;
}
#pqty
{
    width:50px;
}
#pprice
{
    width:50px;
}
#totalpprice
{
    width:50px;
}

JavaScript

$(document).on('change', '#pqty', function(){
    var $this = $(this);
    var sumpprice = $this.siblings('#pprice').val();
	var sumpqty = $this.val();
	var sumtotal = (sumpprice * sumpqty).toFixed(2);
	$this.siblings('#totalpprice').val( sumtotal );
});

$('#padd').click(function(){
	var pname = $('#pname').val();
	var pqty = $('#pqty').val();
	var pprice = $('#pprice').val();
	var totalpprice = (pqty * pprice).toFixed(2);
	$('#addhereform li:last').append('<input type="text" id="pname" name="pname" value="' + pname + '"/><input type="number" id="pqty" name="pqty" value="' + pqty + '"/><input type="text" id="pprice" name="pprice" value="' + pprice + '"/><input type="text" id="totalpprice" name="totalpprice" value="' + totalpprice + '"/></li><li>');
});