Percentage Change Calculator is not working multiple times-CodePudding

I have a percentage change calculator which is working functionally. But I need calculators for each table row. I'm calculating from a table cell and showing result in another cell for sorting purposes.

Problem is, my calculator is only working once in a same table row .trCalculate class. I need it multiple times. Most important thing is I need result in another table cell. Is this possible?

 table {
    border-collapse: collapse;
    font-family: arial;
  }
  
  th {
    border: 1px solid #000;
    padding: 5px;
    border-collapse: collapse;
    font-size: 15px;
  }
  
  td {
    border: 1px solid #000;
    padding: 5px;
    border-collapse: collapse;
    font-size: 15px;
  }
  
  input {
    margin: 3px 0;
    border: 1px solid #00f;
    height: 32px;
    padding-left: 7px;
    font-size: 18px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"></script>

<table>
  <tr>
    <th>Calculator 01</th>
    <th>Calculator 02</th>
    <th>Calculator 01 Result</th>
    <th>Calculator 02 Result</th>
  </tr>
  <tr >
    <td>
      <input type="text"  value=""><br>
      <input type="text"  value="1000">
    </td>
    <td>
      <h2 ></h2>
    </td>
    <td>
      <input type="text"  value=""></br>
      <input type="text"  value="2000">
    </td>
    <td>
      <h2 ></h2>
    </td>
  </tr>
</table>

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

    var first = Number($(formContainer).find('.CalcFrom').val()); // = Topper Price
    var second = Number($(formContainer).find('.CalcTo').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('.CalcResult').val(Number(multiply).toFixed(2));
    $(formContainer).find('.CalcResult').text(Number(multiply).toFixed(2));
  });
</script>

CodePudding user response：

The issue is because your code is looking for single instances of each group of elements in the tr, even though there is two sets.

To avoid this issue you can instead use closest() to get the parent td instead of the tr, then use next() to get its sibling td to update the output:

$(document).on("input change", ".change-calculator", e => {
  let $td = $(e.currentTarget).closest('td');
  let from = Number($td.find('.calc-from').val());
  let to = Number($td.find('.calc-to').val());
  let result = ((to - from) / from) * 100;
  $td.next().find('.calc-result').text(result.toFixed(2));
});

table {
  border-collapse: collapse;
  font-family: arial;
}

th {
  border: 1px solid #000;
  padding: 5px;
  border-collapse: collapse;
  font-size: 15px;
}

td {
  border: 1px solid #000;
  padding: 5px;
  border-collapse: collapse;
  font-size: 15px;
}

input {
  margin: 3px 0;
  border: 1px solid #00f;
  height: 32px;
  padding-left: 7px;
  font-size: 18px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"></script>

<table>
  <tr>
    <th>Calculator 01</th>
    <th>Calculator 02</th>
    <th>Calculator 01 Result</th>
    <th>Calculator 02 Result</th>
  </tr>
  <tr>
    <td>
      <input type="text"  value=""><br />
      <input type="text"  value="1000">
    </td>
    <td>
      <h2 ></h2>
    </td>
    <td>
      <input type="text"  value=""><br />
      <input type="text"  value="2000">
    </td>
    <td>
      <h2 ></h2>
    </td>
  </tr>
</table>