JSFiddle - React, Tailwind, and code Playground

by innoo_devil

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<form action="" method="post" > 
		<table class="table table-bordered ">
		<tbody>
		
			<tr>
				<td colspan="0"><b>SubTotal :</b></td>
				<td><input type="text" name="subtotal" class="form-control subtotal"></td>
			</tr>
		 
		<tr class="pnotes">
				<td colspan="0"><b>Cash Receive:</b></td>	
				<td colspan="0"><input type="text" name="pay" class="form-control pay"></tr>
		<tr class="pnotes">
				<td colspan="0"><b>Balnce : </b></td>
				<td><input type="text" name="payback"  class="form-control payback"></td>
			</tr>
		<tr class="custname">
  			<td colspan="0"><b>Customer Name</b></td>
			<td colspan="0"><input type="text" name="custname" class="form-control"></td>
		</tr>
		</tbody>	
		</table>
</form>

JavaScript

$(document).ready(function(){
		
		 $('.pay').change(function(){
			var pay		 =  $(this).val()-0;
			var subtoal  =	$('.subtotal').val()-0;
			$('.payback').val(pay-subtoal);
		});	
		 
		 
		 $('.custname').change(function(){
		  

			var n=  $('.payback').val()-0;
			   if(n>=0)
			   {
					$('.custname').hide();					//...Do stuff for +ve num
			   }
			 else
			 {
				   $('.custname').show();						//...Do stuff for -ve num
			  } 
		
	});
});