Блог

Я создал форму, и пользователь может добавлять количество полей динамически. HTML:

 <div id="div-forms">
        <div class="form-row mb-1">
          <div class="col">
            <input type="text" name="txtRegional[]" class="form-control" placeholder="Regional" required>
          </div>
          <div class="col">
            <input type="text" name="txtFilial[]" class="form-control" placeholder="Filial" required>
          </div>                          
          <div class="col">
            <input type="text" name="txtAgencia[]" class="form-control agencia" placeholder="Agência" required>
          </div>
          <div class="col">
            <input type="text" name="txtContrato[]" class="form-control contrato" placeholder="Contrato" maxlength="12" required>
          </div>
          <div class="col dataSoN" id="cData" style="display:none;">
            <input type="text" name="txtData[]" class="form-control date" placeholder="Data" value="<?php echo date("d-m-Y");?>">
          </div>
          <div class="col">
            <input type="text" name="txtSaldoDevido[]" class="form-control money txtSaldoDevido" placeholder="Saldo Dev" required>
          </div>              
          <div class="col">
            <input type="text" name="txtValorParcela[]" class="form-control money txtValorParcela" placeholder="V.Parcela" required>
          </div>
          <div class="col">
            <input type="text" name="txtAgenciaTitular[]" class="form-control agencia" placeholder="Ag.Titular" required>
          </div>
          <div class="col" style="display:none;">
            <input type="text" name="txtValorLiquidacaoAntecipada[]" class="form-control money" placeholder="V.Liquid.Ant." readonly>
          </div>
          <div class="col">
            <input type="text" name="txtContratoNovo[]" class="form-control contratoNovo" placeholder="Novo Contrat" required>
          </div>
          <div class="col">
            <select class="custom-select mr-sm-2 cbOperacao" name="cbOperacao[]" id="cbOperacao" required>
              <option selected="selected" disabled="disabled">Selecione</option>
              <?php 
              $query = sprintf("select idoperacao, operacao, ativo from operacoes where ativo = 1");
              $result = mysqli_query($con, $query);
              while($linha = mysqli_fetch_assoc($result)) {
              ?>
                <option value="<?php echo $linha['idoperacao']; ?>"><?php echo $linha['operacao']; ?></option>
              <?php
              }
              ?>
            </select>
          </div>                         
          <div class="col">
            <a href="#" class="addDiv"><i class="fas fa-plus mt-3"></i></a>
            <a href="#" class="remDiv"><i class="fas fa-minus mt-3"></i></a>
          </div>                                              
        </div>
      </div>
      <div class="row">
        <div class="col mt-2">
          <button type="submit" class="btn btn-primary mb-2">Gravar</button>
        </div>
      </div>         
    </form>
  

Jquery:

 <script type="text/javascript">
  $().ready(function() {
      cloneform = $('#div-forms').html();        
      $(document).on('click','.addDiv', function(e){
        $('#div-forms').append(cloneform);
      });
      $(document).on('click','.remDiv', function(e){
        $(event.target).parent().parent().parent().remove();
      });
  });
</script>
  

Каждый раз, когда пользователь создает новую строку, я пытаюсь вызвать событие в select change, которое скрывает или показывает поле даты.
Но я не получаю, чтобы это было только в измененном поле выбора даты.
Как бы мне сделать, чтобы jquery знал, в какой строке следует изменить стиль поля, в котором изменено выбранное?

Вы можете добавить обработчик событий, чтобы следить за изменением любого из выбранных вами .cbOperacao. Однако я не вижу ваших полей даты, поэтому не уверен, как помочь помимо события выбора изменения.

 $(function () {
    $(document).on('change', '.cbOperacao', function () {
        var ParentDiv = $(this).closest('div.col');
        if (someCondition) {
            ParentDiv.find('.form-control.date').hide();
            //or
            ParentDiv.find('.form-control.date').show();
            //or
            ParentDiv.find('.form-control.date').toggle();
        }
    });
});