How to run the same function on different sections on a page with same class name

Question

I have function that is calculating the difference between two fields and showing it in the third field. This is working fine. How can I run the same function if I have multiple "mysection" in my html to calculate the difference between fields within each of these sections?

$(document).ready(function(){
    var total=$(".field2");
    total.keyup(function(){
	var diff = Number($(".field2").val()) - Number($(".field1").val());	
   $(".field3").val(diff.toFixed(2));
    });	
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mysection">
	<input type="text" name="field1" value="" size="30" maxlength="300" class="field1">
	<input type="text" name="field2" value="" size="30" maxlength="300" class="field2">
	<input type="text" name="field3" value="" size="30" maxlength="300" class="field3">
	</div>

Answer 1

$(this).parent()

If each of your input groups are wrapped in a separate tag (ex. <fieldset>) and then everything wrapped in a <form> tag:

• Bind the <form> to the keydown (or keyup), input, and change event.

$('form').on('keydown input change', ...

• Next, assign event data as a selector of all <input>, <textarea>, and/or <select>

$('form').on('keydown input change', 'input, textarea, select', function(e) {...

• Now $(this) will be the clicked^✱ tag if it matches anything in event data parameter (ex. 'input, textarea, select'). Use the following expression to reference the parent tag of the clicked tag (ex. <fieldset>).

var fieldset = $(this).parent();

• Then assign variables to every thing within the parent tag using variations of set.find().

var A = Number(fieldset.find('.A').val());
var B = Number(fieldset.find('.B').val());
var O = fieldset.find('.O').val();
...
fieldset.find('.C').val(Math.round(100 * C) / 100);

^{✱Technically $(this) wasn't clicked, this keyword is the function owner but the event data parameter conveniently treats $(this) as event.target. In this case, e.target is any input, textarea, or select being the event origin of a keydown, input, or change event.}

---

Demo

Added extra functionality it can add, divide, and multiply as well as subtract

$('#calc').on('keydown input change', 'input, select', function(e) {
  var set = $(this).parent();
  var A = Number(set.find('.A').val());
  var B = Number(set.find('.B').val());
  var O = set.find('.O').val();
  var C = 0;
  switch (O) {
    case '-':
      C = A - B;
      break;
    case '+':
      C = A + B;
      break;
    case '*':
      C = A * B;
      break;
    case '/':
      C = A / B;
      break;
    default:
      break;
  }
  set.find('.C').val(Math.round(100 * C) / 100);
});

label,
input,
output,
select {
  font: inherit;
  display: inline-block;
  text-align: center;
  height: 30px;
  line-height: 30px;
  vertical-align: middle;
}

<form id='calc'>
  <fieldset>
    <legend>Calculation 1</legend>
    <input class="A" type="number" value="0" min='-9999.99' max="9999.99" step='.01'>
    <select class='O'>
      <option value='-'>&minus;</option>
      <option value='+'>&plus;</option>
      <option value='*'>&times;</option>
      <option value='/'>&divide;</option>
    </select>
    <input class="B" type="number" value="0" min='-9999.99' max="9999.99" step='.01'><label>&nbsp;=&nbsp;</label>
    <output class='C'></output>
  </fieldset>

  <fieldset>
    <legend>Calculation 2</legend>
    <input class="A" type="number" value="0" min='-9999.99' max="9999.99" step='.01'>
    <select class='O'>
      <option value='-'>&minus;</option>
      <option value='+'>&plus;</option>
      <option value='*'>&times;</option>
      <option value='/'>&divide;</option>
    </select>
    <input class="B" type="number" value="0" min='-9999.99' max="9999.99" step='.01'><label>&nbsp;=&nbsp;</label>
    <output class='C'></output>
  </fieldset>

  <fieldset>
    <legend>Calculation 3</legend>
    <input class="A" type="number" value="0" min='-9999.99' max="9999.99" step='.01'>
    <select class='O'>
      <option value='-'>&minus;</option>
      <option value='+'>&plus;</option>
      <option value='*'>&times;</option>
      <option value='/'>&divide;</option>
    </select>
    <input class="B" type="number" value="0" min='-9999.99' max="9999.99" step='.01'><label>&nbsp;=&nbsp;</label>
    <output class='C'></output>
  </fieldset>
</form>

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

Answer 2

You can use siblings & $(this). Also delegate the event from the parent that is div.mysection.

In this case on key up event $(this).val() will get the value for input with field2 element & $(this).siblings('.field1').val() will get the value from the sibling element with this class

$(document).ready(function() {
  $('.mysection').on('keyup', '.field2', function() {
    var field2Val = $(this).val();
    let getFieldOne = $(this).siblings('.field1').val();
    var diff = Number(field2Val) - Number(getFieldOne);
    $(this).siblings(".field3").val(diff.toFixed(2));
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mysection">
  <input type="text" name="field1" value="" size="30" maxlength="300" class="field1">
  <input type="text" name="field2" value="" size="30" maxlength="300" class="field2">
  <input type="text" name="field3" value="" size="30" maxlength="300" class="field3">
</div>

<div class="mysection">
  <input type="text" name="field1" value="" size="30" maxlength="300" class="field1">
  <input type="text" name="field2" value="" size="30" maxlength="300" class="field2">
  <input type="text" name="field3" value="" size="30" maxlength="300" class="field3">
</div>

Answer 3

You can do this by using the div as the selector of all input childs instead of just selecting one.

var total=$("div input");

You can do it like this instead.