JSFiddle - React, Tailwind, and code Playground

by Murali Kaliappan

HTML

<div>
<input type="text" id="nob" placeholder = "No.of Batched"/>
<input type="text" id="rs" placeholder = "return sand"/>
<input type="button" value="add"/>
</div>
<hr>
<div id="componentDiv">

</div>

<div>

<input type="text" id="noOfBatch" placeholder="noOfBatch"/>
<input type="text" id="bentonite" placeholder="bentonite"/>
<input type="text" id="fss" placeholder="fss" />
<input type="text" id="LCA" placeholder="lca"/>
<input type="text" id="water" placeholder="water"/>
</div>
<div>







<input type="text" id="returnSandPerBatch" placeholder="returnSandPerBatch" value="3450.0"/>
<input type="text" id="totalRS" placeholder="totalRS"/>
<input type="text" id="totalPreparedSand" placeholder="totalPreparedSand"/>
</div>

CSS

div {
  margin:20px 0px;
}
span{
  margin:20px 60px 21px 0px
}
hr{
  background-color:lightgray;
}

JavaScript

var waterKgPerBatch =21;

$("#noOfBatch").keyup(function(){
	var nob = Number($(this).val());
  var rsb = Number($("#returnSandPerBatch").val())
  
  //set total return sand
	$("#totalRS").val(nob * rsb / 1000);
  $("#water").val(nob * waterKgPerBatch / 1000 );
  
})

$("#noOfBatch,#totalRS,#water,#bentonite,#fss,#LCA,#water").on("keyup",function(){
	var bentonite = Number($("#bentonite").val());
  var fss = Number($("#fss").val());
  var lca = Number($("#LCA").val());
  var water = Number($("#water").val());
  var returnSand  =Number($("#totalRS").val())
  totPS = Number((bentonite + fss + lca + water + returnSand).toFixed(2))
  $("#totalPreparedSand").val(totPS)

})
$("input[value='add']").click(function(){
	var nob = Number($("#nob").val());
  var rs = Number($("#rs").val());
  $("#nob,#rs").val("");
  
  var returnSand  =Number($("#totalRS").val())
  var noOfBatch		=Number($("#noOfBatch").val())
  
  
  $("#totalRS").val(returnSand + rs);
  $("#noOfBatch").val(noOfBatch + nob);
  
  var removeBtn = "<input  type='button' name='removeBtn' value='remove'/>";  
  var noOfBatchLabel = "<label>No.OfBatches : <span>"+nob+" </span></label>";
  var returnSandLabel = "<label>Return Sand : <span>"+rs+"</span></label>";
  $("#componentDiv").append( "<div><span name='nob'>"+noOfBatchLabel+"</span><span name='rs'>"+returnSandLabel+"</span><span>"+removeBtn+"</span></div>")    
  $("#noOfBatch").trigger("keyup");
})

$("#componentDiv").on("click","input[value='remove']",function(){
	debugger;
	var nob = Number($(this).closest("span").siblings("span[name='nob']").find("span").text())
  var rs  = Number($(this).closest("span").siblings("span[name='rs']").find("span").text())
  
  
  var returnSand  =Number($("#totalRS").val())
  var noOfBatch		=Number($("#noOfBatch").val())
  
  $("#totalRS").val(returnSand - rs);
  $("#noOfBatch").val(noOfBatch - nob);
  $("#noOfBatch").trigger("keyup");
	$(this).closest("div").remove();
})