Add one more ID when generating one more INPUT via javascript

Question

I’m creating a voting system, and before the person generates the input with the options, the person has to choose the number of options they will have, then they go to a form with the alternatives according to the amount they have chosen, but I want to put something like Add one more field, and I got through JAVASCRIPT.

Only that he is not able to count the fields coming through javascript:

Through javascript it puts one more field when one clicks on the Button, after the idDiv div...

        
        echo'<form action="valida_enquete.php" method="POST" accept-charset="utf-8">
            Título da sua enquete:<input type="text" name="titulo_enquete"><br>
            Descrição da enquete: <input type="text" name="descricao_enquete"><br><br>';
            
            if(isset($_GET['qtdade_opcoes'])){
                
                ?>
                <div id="idDiv">
                <?php
                for ($i=0; $i<$_GET['qtdade_opcoes']; $i++) { 
                    
                    $indice = $i+1;
                    echo'opção <input type="text" name="opcao[]"><br>';
                    echo'imagem <input type="text" name="img[]"><br>';
                

                echo' <input type="hidden" name="numero" value="'.$_GET['qtdade_opcoes'].'">';
                }
                echo '
                
                <input type="hidden" name="reality" value="'.$row['reality'].'">
                
                </div>';
            }
        
    ?>  

Javascript code

window.onload = function () {
$(document).ready(function() {
   var maximo = 5;   //maximo de 5 campos
   var i = 1;
   $('#add_div').click (function(e) {
     e.preventDefault();  //previne novos cliques
     if (i < maximo) {
       $('#idDiv').append('<div>\
          opção: <input type="text" name="opcao[]"/> <br> imagem:  <input type="text" name="img[]"/>\
          <a href="#" class="remove">Remover</a>\
           <?php    echo' <input type="hidden" name="numero" value="'.$_GET['qtdade_opcoes'].'">';
           ?></div>');
           i++;
     }
  });
 
    // Remove o div anterior
    $('#idDiv').on("click",".remove",function(e) {
      e.preventDefault();
      $(this).parent('div').remove();
      i--;
    });
});
};

Somebody help me, please?

Answer 1

No need to declare this variable i = 1 and then incrementing, you can get this value always updated in the click using for example this selector: var i = $("#idDiv > div").length; i.e., the Ivs nested within div with id "idDiv", and length to return the amount.

Simply put, it would look like this (includes some comments):

window.onload = function () {
$(document).ready(function() {
   var maximo = 5;   //maximo de 5 campos
  
   $('#add_div').click (function(e) {
     e.preventDefault();  //previne novos cliques

      // total de divs aninhados abaixo de idDiv
      var i = $("#idDiv > div").length;

     // inverti esse if, para não ficar todo o código aninhado, e sair logo se puder adicionar nos itens
     if (i >= maximo) return;
     
     $('#idDiv').append('<div>\
opção: <input type="text" name="opcao[]"/> <br> imagem:  <input type="text" name="img[]"/>\
<a href="#" class="remove">Remover</a></div>');

  });
 
    // Remove o div anterior
    $('#idDiv').on("click",".remove",function(e) {
      e.preventDefault();
      $(this).parent('div').remove();
    });
});
};

#idDiv > div {
   padding: 5px;
   border: solid 1px #ddd;
   background-color: #eee
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="idDiv">
  <div>
    opção: <input type="text" name="opcao[]"><br>
    imagem: <input type="text" name="img[]"><br>  
  </div>
</div>

<button id="add_div">Adicionar</button>