Event change in dynamic fields with jquery

Question

I created a form and the user can add the number of fields dynamically. The 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>

The 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>

Each time the user creates a new line I am attempting to trigger an event in the select change that hides or shows the date field. But I'm not getting it to be just in the modified select date field. How would I do to jquery know which line should it change the style of the field where the selected is changed?

Answer 1

You can add an event handler to watch the change of any of your .cbOperacao selects. I don't see your date fields though, so not sure how to help beyond the select change event.

$(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();
        }
    });
});