I am looking for multiple percentage change calculator with same codes. Jquery-CodePudding

I developed a percentage change calculator with jquery. It is working file. But problem is, I can't make multiple calculator with same jquery codes. Now each calculator need special codes and class for it. Is it possible muliple calculator without adding any extra codes ? Codepen preview : https://codepen.io/toolsim/pen/ZEoYbgY . Please help me...

$(document).on("change keyup blur live", ".ChangeCalulator", function() { // For:- = Topper To Current %
  ///////////////////
  var first = Number($('.From101').val()); // = Topper Price
  var second = Number($('.To101').val()); // = Current Price
  var minus = second - first; // 2000 - 1000 = {1000 = minus}
  var divide = (minus / first); // 1000 / 1000 = 1
  var multiply = divide * 100; // 1 * 100 = 100%
  $('.Result101').val(Number(multiply).toFixed(2)); // = Topper to Current %
  ///////////////////////
  var first = Number($('.From102').val()); // = Topper Price
  var second = Number($('.To102').val()); // = Current Price
  var minus = second - first; // 2000 - 1000 = {1000 = minus}
  var divide = (minus / first); // 1000 / 1000 = 1
  var multiply = divide * 100; // 1 * 100 = 100%
  $('.Result102').val(Number(multiply).toFixed(2)); // = Topper to Current %
});
/////////////////////////

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="text"  value="">
<input type="text"  value="25000">
<input type="text"  value="">
<br><br>
<input type="text"  value="">
<input type="text"  value="25000">
<input type="text"  value="">
<br><br>

CodePudding user response：

Yes, treat each one individually, by wrapping it inside a container .section. Use an event handler on each of the required inputs, use input event, then by finding parent element you can find other elements in same "line".

document.querySelectorAll(".ChangeCalulator").forEach(function(elem) {
  elem.addEventListener("input", function() {
    var input = this;
    var parent = this.closest(".section")

    var first = Number(parent.querySelector('.From101').value);
    var second = Number(parent.querySelector('.To101').value);
    var minus = second - first;
    var divide = (minus / first);
    var multiply = divide * 100;
    parent.querySelector('.Result101').value = (Number(multiply).toFixed(2));

  });
});

<div >
  <input type="text"  value="">
  <input type="text"  value="25000">
  <input type="text"  value="">
</div>
<br>
<div >
  <input type="text"  value="">
  <input type="text"  value="25000">
  <input type="text"  value="">
</div>

CodePudding user response：

You can try following code:

For HTML:

<div >
  <input type="text"  value="">
  <input type="text"  value="25000">
  <input type="text"  value="">
</div>
<br>
<div >
  <input type="text"  value="">
  <input type="text"  value="25000">
  <input type="text"  value="">
</div>

For Jquery:

$(document).on("change keyup blur live", ".ChangeCalulator", function() {// For:- = Topper To Current %
  let formContainer = $(this).closest('.section')

  var first = Number($(formContainer).find('.From101').val()); // = Topper Price
  var second = Number($(formContainer).find('.To101').val()); // = Current Price
  var minus = second - first; // 2000 - 1000 = {1000 = minus}
  var divide = (minus / first); // 1000 / 1000 = 1
  var multiply = divide * 100; // 1 * 100 = 100%
  $(formContainer).find('.Result101').val(Number(multiply).toFixed(2)); 

});