JSFiddle - React, Tailwind, and code Playground

by twince

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form2" method="post" enctype="multipart/form-data">
   <div class="calt">  
   <h3>Number of Copy’ s total : </h3>
          <input  type="text" name="topag" onKeyUp="checks()" placeholder="1" class="topag" value="1" />
          <input type="text" name="totalpr" class="totalpr" value="2456.00"  />
          <h3>Total</h3>
          <span class="total_amount" id="total_amnt">0</span>
          </div>
          
          <?php $topriceS='25'; ?>
          
           <input type="checkbox" checked  name="Browser" id="other_donation_check" Value="<?php echo $topriceS; ?>" onClick='add(<?php echo $topriceS ?>, this);'> 
            
          
            <div class="col-sm-6"> 
            <h3>Subtotal</h3>
            <div class="numbr_txt">
            
        <input type="text"  style="display:block; width:auto !important" class="numbr_txttwo" name="thetotal" value="0" id="total_amounts" >
            </div>
            </div>
          
          </form>

JavaScript

function checks() {
        document.getElementById('other_donation_check').checked = false;
    }

function add(total, this_chk_bx) {
    var thetotal = form2.thetotal.value;


    if (this_chk_bx.checked == true) {
        //add if its checked
		var count=0;
        form2.thetotal.value = Number(thetotal) + Number(total);
		count++;
    } else {
        //subtract if its unchecked
        form2.thetotal.value = thetotal - total;
    }
}



$('.topag').on('input', function(){
  var parent = $(this).closest('.calt');
  var totalAmt = parseFloat(parent.find('.totalpr').val());
  var quantity = parseFloat($(this).val());

 var totalqty = totalAmt*quantity;
var total = totalqty.toFixed(2);

  document.getElementById("total_amnt").innerHTML = total;
 $('#total_amounts').val(total);
  calcul_total_quatities();
  })