Input Mask in dynamic modal

Question

I’m having "almost the same" problems. I have a dynamic modal listing, and the Mask input is only applied in the first loop of WHILE, the others don’t apply. someone can help me?

This is the form inside the modal:

<form method="POST" action="anuidade.php">
  <input type="hidden" name="acao" id="acao" value="3">
  <input type="hidden" name="id" id="id" value="<?php echo $row_anuidade['id']; ?>">
  <fieldset class="border p-2" style="background-color: #F1F1F1;">
    <div class="form-row">
      <div class="form-group col-md-4">
        <label for="aluno">Nome * </label>
        <input type="text" style="text-transform:uppercase" class="form-control" id="aluno" name="aluno" value="<?php echo $row_anuidade['aluno']; ?>" required>
      </div>
      <div class="form-group col-md-4">
        <label for="cpf">CPF</label>
        <input type="text" class="form-control" id="cpf" name="cpf" value="<?php echo $row_anuidade['cpf']; ?>">
      </div>
      <div class="form-group col-md-4">
        <label for="instrutor">Instrutor</label>
        <input type="text" style="text-transform:uppercase" class="form-control" id="instrutor" name="instrutor" value="<?php echo $row_anuidade['instrutor']; ?>" required>
      </div>
    </div>

    <div class="form-row">
      <div class="form-group col-md-4">
        <label for="valor">Valor *</label>
        <input type="text" class="form-control" id="valor" name="valor" value="<?php echo $row_anuidade['valor']; ?>" required>
      </div>
      <div class="form-group col-md-2">
        <label for="ano">Ano *</label>
        <input type="text" class="form-control" id="ano" name="ano" value="<?php echo $row_anuidade['ano']; ?>" maxlength="4" required>
      </div>
    </div>
    <div class="custom-control custom-checkbox form-group">
      <input type="checkbox" class="custom-control-input" id="pago" name="pago" value="0">
      <label class="custom-control-label" for="pago">Cancela o pagamento?</label>
    </div>
  </fieldset>


  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
    <button type="submit" class="btn btn-danger">Salvar</button>
  </div>
</form>

And this is the script I’m using:

<script> 
$(document).ready(function(){
   $('#cep').mask('00000-000');
   $('#cpf').mask('000.000.000-00', {reverse: true});
   $('#valor').mask("#.##0,00", {reverse: true});
   $('#telefone').mask('(00) 0000-00009');
   });
</script>

Answer 1

Repeating id on the same page is wrong. An id must be unique, it is like an identification of an element, as well as a CPF where every citizen has his unique.

If you have two elements with the same id:

<input id="cpf">
<input id="cpf">

When trying to find the element by id using $('#cpf').mask('000.000.000-00', {reverse: true}); what shall he find? All? No! He will seek only the first, ignoring others.

Instead of id, use class when there is more than one element that will receive the same thing:

<input class="form-control cpf">
<input class="form-control cpf">

And apply the plugin to all elements that have the same class:

$('.cpf').mask('000.000.000-00', {reverse: true});