jQuery запускает функцию только для элемента, по которому щелкают

Question

У меня есть небольшая проблема, которую я понятия не имею, как решить.Этот HTML / PHP-код ниже получает разные значения из базы данных и выводит их в разные поля ввода.

HTML / PHP ниже представляет собой один элемент, и несколько из них сделаны с различными значениями из базы данных.Затем я получил небольшой javascript, который вычисляет некоторые другие значения из значений, которые вводятся.Проблема в том, что у меня есть, скажем, 5 элементов, и он хочет рассчитать только для одного из них, но если я нажму кнопку "btn-oppdater", он рассчитает для всех различных элементов.

Каксделать так, чтобы он вычислялся только для элемента, в котором находится кнопка?

Скрипт

$('.btn-oppdater').click(function(){
  $(".kval_spill").each(function(){
    var fieldShow = $(this).next('.kval_spill_inner');
    var b_value_kval_1 = fieldShow.find('.b_value_kval_1')[0].value;
    var b_odds_kval_1 = fieldShow.find('.b_odds_kval_1')[0].value;
    var e_odds_kval_1 = fieldShow.find('.e_odds_kval_1')[0].value;
    var gebyr_kval = '0.02'

    var q_value = ((b_odds_kval_1 / (e_odds_kval_1 - gebyr_kval)) * b_value_kval_1);

    var q_tap = (b_odds_kval_1 - 1) * b_value_kval_1 - (e_odds_kval_1 - 1) * q_value; 

    var q_value_fixed = q_value.toFixed(2);
    var q_tap_fixed = q_tap.toFixed(2);
    fieldShow.find('.q_value_1')[0].value = q_value_fixed;
    fieldShow.find('.q_tap_1')[0].value = q_tap_fixed;
  });
});

HTML / PHP

    <?php while ($row = mysqli_fetch_assoc($result2)) { echo '
    <form style="margin-top: 10px;" action="" method="post" class="">
      <input type="hidden" class="kval_spill">
      <div class="kval_spill_inner">
        <input class="" type="hidden" name="id" value="'.$row['id'].'">
          <div class="form-row">
          <div class="form-group col-md-4">
            <input type="text" class="form-control kval_kamp_1" name="kval_kamp_1" value ="'.$row['kval_kamp_1'].'" placeholder="Kamp">
          </div>
          <div class="form-group col-md-3">
            <div class="input-group">
            <input type="text"class="form-control b_value_kval_1" name="b_value_kval_1" value ="'.$row['b_value_kval_1'].'" placeholder="Spill verdi">
            <div class="input-group-append">
              <span class="input-group-text">Kr</span>
            </div>
            </div>    
          </div>
          <div class="form-group col-md-2">
            <input type="text" class="form-control b_odds_kval_1" name="b_odds_kval_1" value ="'.$row['b_odds_kval_1'].'" placeholder="Odds">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group col-md-4">
            <input type="text" class="form-control kval_marked_1" name="kval_marked_1" value ="'.$row['kval_marked_1'].'" placeholder="Type marked">
          </div>
          <div class="form-group col-md-3">
            <div class="input-group">
            <input type="text"class="form-control text-info q_value_1" name="q_value_1" value ="'.$row['q_value_1'].'" placeholder="Lay verdi">
            <div class="input-group-append">
              <span class="input-group-text">Kr</span>
            </div>
            </div>    
          </div>
          <div class="form-group col-md-2">
            <input type="text" class="form-control e_odds_kval_1" name="e_odds_kval_1" value ="'.$row['e_odds_kval_1'].'" placeholder="Odds">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group col-md-2">
            <div class="input-group">
            <div class="input-group-append">
              <span class="input-group-text">Tap</span>
            </div>
            <input type="text" class="form-control text-danger q_tap_1" name="q_tap_1" value ="'.$row['q_tap_1'].'" placeholder
="0.00" readonly>
            <div class="input-group-append">
              <span class="input-group-text">Kr</span>
            </div>
            </div>    
          </div>
          <div class="col-auto">
            <button type="button" class="btn btn-outline-secondary btn-oppdater">Regn ut</button>
          </div>
        </div>
      </div>
    </form>
    <br>
    '; }?>

Answer 1

Замените $(".kval_spill") на $(this).closest("form").find(".kval_spill").

Но похоже, что в каждой форме есть только один kval_spill и kvall_spill_inner, поэтому нет необходимости использовать .each().Вы можете избавиться от цикла .each() и просто использовать:

var fieldShow = $(this).closest("form").find('.kval_spill_inner');

И вместо

fieldShow.find('.q_value_1')[0].value = q_value_fixed;
fieldShow.find('.q_tap_1')[0].value = q_tap_fixed;

вы можете написать:

fieldShow.find('.q_value_1').val(q_value_fixed);
fieldShow.find('.q_tap_1').val(q_tap_fixed);