JSFiddle - React, Tailwind, and code Playground

by Marco

HTML

<form id="itemlist" method="post" enctype="multipart/form-data" >

  
    <!--<input type="hidden" id="ranges" name="ranges" value="1-3" />-->
    
    <input type="text" placeholder="Item" id="R1_A_1"  size="20"  value="HDD Baracuda Black 2TB" />
    <span id="R1_min_1" class="plusminus">-</span>
    <input type="text" placeholder="Qty" id="R1_B_1"  value="0" size="2" class="form_qty" />
    <span id="R1_plus_1" class="plusminus" >+</span>
    <input type="text" placeholder="Price" id="R1_C_1" size="5"  value="10" />
    <input type="text" placeholder="Disc." id="R1_D_1"  size="3" class="form_discount" />
    <input type="text" placeholder="Sum" id="R1_E_1"  size="6" class="form_sum" value="0"/>
    <br />
    
    <input type="text" placeholder="Item" id="R1_A_2"  size="20"  value="Motherboard ASus XYZ" />
    <span id="R1_min_2" class="plusminus">-</span>
    <input type="text" placeholder="Qty" id="R1_B_2"  value="0" size="2" class="form_qty" />
    <span id="R1_plus_2" class="plusminus" >+</span>
    <input type="text" placeholder="Price" id="R1_C_2"  size="5"  value="46" />
    <input type="text" placeholder="Disc." id="R1_D_2"  size="3" class="form_discount" />
    <input type="text" placeholder="Sum" id="R1_E_2"  size="6" class="form_sum" value="0"/>
    <br />
    
    <input type="text" placeholder="Item" id="R1_A_3"  size="20"  value="Memory Kingston DDR3 4GB" />
    <span id="R1_min_3" class="plusminus">-</span>
    <input type="text" placeholder="Qty" id="R1_B_3"  value="0" size="2" class="form_qty" />
    <span id="R1_plus_3" class="plusminus" >+</span>
    <input type="text" placeholder="Price" id="R1_C_3"  size="5"  value="18" />
    <input type="text" placeholder="Disc." id="R1_D_3"  size="3" class="form_discount" />
    <input type="text" placeholder="Sum" id="R1_E_3"  size="6" class="form_sum" value="0"/>
    <br />
    <input type="text" placeholder="Total Amount" id="R1_total"  />
    
    
    <br />
    <br />
    
    
    <input...

CSS

.plusminus {
    font-weight: bold;
    font-family: monospace;
    font-size: 1.3em;
    border: 1px green solid;
    padding: 0px 5px;
  }

JavaScript

$('.form_sum,input[placeholder="Total Amount"]').attr('disabled','true') 
   function calculateTot(idx){
		 var totSum=0
		 var collection = $('form').find('[id^="'+idx+'"]').filter(function(index){
			  return this.id.search(/\d$/) != -1&&this.className==='form_sum';
		  });
		 for(i=0;i<collection.length;i++)
			 if (!isNaN(parseFloat(collection.get(i).value))){totSum+=parseFloat(collection.get(i).value)}
		  $('#'+idx+'_total').val(totSum)	 
	}	 
	function calculateScount(element){
		var idx=element.attr('id').slice(0,-4)
		var ind=element.index()
		var formPrice=parseFloat($('form').find(':nth-child('+(ind)+')').val())
		var formQty=parseFloat($('form').find(':nth-child('+(ind-2)+')').val())
		var thisVal=parseFloat(element.val())
		var scount=(formPrice*formQty)/100*thisVal
		$('form').find(':nth-child('+(ind+2)+')').val((formPrice*formQty-scount).toFixed(2))
		calculateTot(idx) 
     }	 		
	 function calculate(nuber,qty,idx,a,b,c){
		 var formQty=nuber+a
		 var rowTot=nuber+b
		 var scount=nuber+c
		 var scontValue=$('form').find(':nth-child('+scount+')').val()
		 var element=$('form').find(':nth-child('+scount+')')
		 if(scontValue===''){
			 var tot=parseFloat($('form').find(':nth-child('+rowTot+')').val())
			 $('form').find(':nth-child('+formQty+')').val((tot*qty).toFixed(2))
			 calculateTot(idx) 
		 }else{calculateScount(element)}
	  }	 
      $('.plusminus').click(function(){
		var val=$(this).text()
		var ind=$(this).index()
		if(val==='+'){
			var idx=$(this).attr('id').slice(0,-7)
			var qty=parseInt($(this).prev().val())
			qty++
			$(this).prev().val(qty)
			calculate(ind,qty,idx,4,2,3)
		}
		if(val==='-'&&parseInt($(this).next().val())>=1){
			var idx=$(this).attr('id').slice(0,-6)
			var qty=parseInt($(this).next().val())
			qty--
			$(this).next().val(qty)
			calculate(ind,qty,idx,6,4,5)
		}
       });
	    $('input.form_qty').on('change',function(){
			var ind=$(this).index()
			var qty=parseInt($(this).val())
			var...