Как получить сумму самых низких значений в 3 рядах, добавленных динамически

Question

Следующий код получит наименьшее значение, введенное в первые 3 столбца, он работает нормально. Но после добавления строки (Добавить строку) я не могу получить наименьшее значение из следующих 3 столбцов. Также я хочу получить сумму всех 3 самых низких значений из столько столбцов, сколько добавит пользователь. В этой связи требуется ваша любезная помощь.

$(document).ready(function() {
  var i = 1;
  $("#Add_BDSP").click(function() {
    $('#BDSP' + i).html("<td><input type='text' name='QuotedAmount1[" + i + "]' placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount2[" + i + "]'placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount3[" + i + "]' placeholder='Quoted Amount' class='form-control'/></td>");

    $('#Tab_BDSP').append('<tr id="BDSP' + (i + 1) + '"></tr>');
    i++;
  });
  $("#Delete_BDSP").click(function() {
    if (i > 1) {
      $("#BDSP" + (i - 1)).html('');
      i--;
    }
  });

});

var input = $('[name="QuotedAmount1[0]"],[name="QuotedAmount2[0]"],[name="QuotedAmount3[0]"]'),

  QuotedAmount1 = $('[name="QuotedAmount1[0]"]'),
  QuotedAmount2 = $('[name="QuotedAmount2[0]"]'),
  QuotedAmount3 = $('[name="QuotedAmount3[0]"]'),

  MulRes = $('[name="ServiceTotalCost"]');


input.change(function() {
  var Qoute1 = (isNaN(parseInt(QuotedAmount1.val()))) ? 0 : parseInt(QuotedAmount1.val());
  var Qoute2 = (isNaN(parseInt(QuotedAmount2.val()))) ? 0 : parseInt(QuotedAmount2.val());
  var Qoute3 = (isNaN(parseInt(QuotedAmount3.val()))) ? 0 : parseInt(QuotedAmount3.val());



  MulRes.val(Math.min(Qoute1, Qoute2, Qoute3));

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group form-float">
  <table class="table table-bordered table-hover" id="Tab_BDSP">
    <thead>
      <tr>
        <td>Amount</td>

      </tr>
    </thead>
    <tbody>
      <tr id='BDSP0'>


        <td>
          <input type="text" name='QuotedAmount1[0]' placeholder='Quoted Amount' class="form-control" required />
          <input type="text" name='QuotedAmount2[0]' placeholder='Quoted Amount' class="form-control" required />
          <input type="text" name='QuotedAmount3[0]' placeholder='Quoted Amount' class="form-control" required />
        </td>

      </tr>

      <tr id='BDSP1'></tr>
    </tbody>
  </table>
</div>
<a id="Add_BDSP" class="btn btn-default pull-left">Add Row</a><a id='Delete_BDSP' class="pull-right btn btn-default">Delete Row</a>
</div>

<div class="col-md-4">

  <div class="input-group form-group">
    <span class="input-group-addon">
                                                    <i class="material-icons">business_center</i>
                                                </span>
    <div class="form-line">
      <input type="number" class="form-control" name="ServiceTotalCost" id="ServiceTotalCost" required>
    </div>
  </div>
</div>

Answer 1

Но после добавления строки (Добавить строку) я не могу получить наименьшее значение из следующих 3 столбцов

Ваша основная проблема:

QuotedAmount1 = $('[name="QuotedAmount1[0]"]'),
QuotedAmount2 = $('[name="QuotedAmount2[0]"]'),
QuotedAmount3 = $('[name="QuotedAmount3[0]"]'),

Поскольку вы просто выбираете QuotedAmount1[0] - QuotedAmount3[0], после добавления row new input имеет QuotedAmount1[1] .., вы также использовали change, а для новой строки вам нужно использовать change с document селектор, чтобы жить change. И вы должны переместить свою переменную в событие change. Важно то, что вы должны выбрать свой ввод без name, вот рабочий фрагмент:

$(document).ready(function() {
  var i = 1;
  $("#Add_BDSP").click(function() {
    $('#BDSP' + i).html("<td><input type='text' name='QuotedAmount1[" + i + "]' placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount2[" + i + "]'placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount3[" + i + "]' placeholder='Quoted Amount' class='form-control'/></td>");

    $('#Tab_BDSP').append('<tr id="BDSP' + (i + 1) + '"></tr>');
    i++;
  });
  $("#Delete_BDSP").click(function() {
    if (i > 1) {
      $("#BDSP" + (i - 1)).html('');
      i--;
    }
  });

});



$(document).on('change', '#Tab_BDSP tbody tr td input[type="text"]', function() {
  let result = 0;
  var MulRes = $('input#ServiceTotalCost');

  var QuotedAmount1 = $(this).parent().find('input[type="text"]').eq(0),
    QuotedAmount2 = $(this).parent().find('input[type="text"]').eq(1),
    QuotedAmount3 = $(this).parent().find('input[type="text"]').eq(2);

  var Qoute1 = (isNaN(parseInt(QuotedAmount1.val()))) ? 0 : parseInt(QuotedAmount1.val()),
    Qoute2 = (isNaN(parseInt(QuotedAmount2.val()))) ? 0 : parseInt(QuotedAmount2.val()),
    Qoute3 = (isNaN(parseInt(QuotedAmount3.val()))) ? 0 : parseInt(QuotedAmount3.val());

  var min = Math.min(Qoute1, Qoute2, Qoute3);
  $(this).parent().attr('data-lowest', min)


  $('#Tab_BDSP tbody tr td').each(function() {
    result += +$(this).attr('data-lowest')
  });

  MulRes.val(result)
});

Thank you for kind response,
the code is running perfect,
but the issue is if i change the value in additional rows,
it adds the lowest into the sum,
e.g. 1st row have 300000 400000 500000 and second row have 600000 700000 800000 The total sum will be 900000 which is perfect. but if i change the value from 600000 to 200000 it should shows 700000 but it gives value of 1100000. Your kind help is needed to rectify this issue in the given code. – ADIL I.T 8 mins ago

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group form-float">
  <table class="table table-bordered table-hover" id="Tab_BDSP">
    <thead>
      <tr>
        <td>Amount</td>

      </tr>
    </thead>
    <tbody>
      <tr id='BDSP0'>


        <td>
          <input type="text" name='QuotedAmount1[0]' placeholder='Quoted Amount' class="form-control" required />
          <input type="text" name='QuotedAmount2[0]' placeholder='Quoted Amount' class="form-control" required />
          <input type="text" name='QuotedAmount3[0]' placeholder='Quoted Amount' class="form-control" required />
        </td>

      </tr>

      <tr id='BDSP1'></tr>
    </tbody>
  </table>
</div>
<a id="Add_BDSP" class="btn btn-default pull-left">Add Row</a><a id='Delete_BDSP' class="pull-right btn btn-default">Delete Row</a>
</div>

<div class="col-md-4">

  <div class="input-group form-group">
    <span class="input-group-addon">
                                                    <i class="material-icons">business_center</i>
                                                </span>
    <div class="form-line">
      <input type="number" class="form-control" name="ServiceTotalCost" id="ServiceTotalCost" required>
    </div>
  </div>
</div>

Также я хочу получить сумму всех 3-х самых низких значений из столько столбцов, сколько пользователь добавит

Для получения sum необходимо получить min, а также старое наименьшее значение