Automatically creating input limiting to 5

Question

I’m creating two input fields when I click on the button more (+) I can already generate both inputs, but I need to limit it, only 5 input I need, I tried with while and I was unsuccessful, follow the code, thank you

/creates more additive value fields and number of plots/

function duplicarCampos(){  
    var clone = document.getElementById('origem').cloneNode(true);  
    var destino = document.getElementById('destino');  
    destino.appendChild (clone);  

    var camposClonados = clone.getElementsByTagName('input');  

    for(i=0; i<camposClonados.length;i++){  
        camposClonados[i].value = '';  
    }  

}  

    <tr>
            <td colspan="4">
                <div align="center" style="font-size:12px;background: #FFDAB9;border: 1px solid rgb(161, 161, 161) " id="origem"  > 
                    <br>
                    Valor do Aditívo (R$):  <input type="text" id="tco_valor_aditivo_new" name="tco_valor_aditivo_new[]"  maxlength="14" size="14"/><br>
                    <br>
                    Número de Parcelas:
                    <select name="tco_num_parcelas" id="tco_num_parcelas" >
                        <option value="...">...</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>
                    <p>
                    <button type="button" style="cursor: pointer;" onclick="duplicarCampos();">+</button>
                    <button type="button" style="cursor: pointer;" onclick="removerCampos(this);">-</button>
                    <p><p><p>
                </div> 
            <div id="destino"></div> 
            </td>
        </tr>

Answer 1

Try the following, add a date attribute to your button.

<button type="button" data-index="0" style="cursor: pointer;" onclick="removerCampos(this);">-</button>


function duplicarCampos(event){  
    var clone = document.getElementById('origem').cloneNode(true);  
    var destino = document.getElementById('destino');  
    destino.appendChild (clone);
    var dataIndex = event.getAttribute("data-index");

    if(dataIndex > 5){
       var camposClonados = clone.getElementsByTagName('input');

       for(i=0; i<camposClonados.length;i++){  
          camposClonados[i].value = '';  
       } 
    }
    dataIndex++;
    event.setAttribute("data-index",dataIndex);
}  

Answer 2

You can get the number of inputs within a parent element. For example find the number of inputs within the div "fate".

Example:

function duplicarCampos(){ 
   var count = $("#destino input").length;
   if (count <= 5) {
      var clone = document.getElementById('origem').cloneNode(true);  
      var destino = document.getElementById('destino');  
      destino.appendChild (clone);  
   }
   var camposClonados = clone.getElementsByTagName('input');  
}