How to clone Divs from a past Select number?

Question

I need to create a select with values from 1 to N numbers. After the user selects a number in select I have to clone the div lote from the selected value.

Example: if I select number 2 in select, you have to clone two Divs. If I select 1, clone only one and I select 3 clone 3.

Follow an example:

$("#qtdLote").on("change",function(){
  
    var num=parseInt($(this).val());
    //$("#grupo-lotes").html(''); //limpar antes de gerar
    for(var i=1;i<=num;i++){
      $("#grupo-lotes").append($("#lote").clone());
    }
  
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label>Escolha</label>
  <select id="qtdLote">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</div>

<br />
<div id="grupo-lotes">
<div id="lote">
    <label>LOTE </label>
    <input type="">
</div>
</div>

See on the codepen.io

Answer 1

Friend you were on a good path with the use of $("#grupo-lotes").html(''); only that your div lotes it must be outside the parent div in order to be used again in cloning, as it will be eliminated every evento

Here’s an incomplete approach, missing initialize the first call, which I’ll let you solve as "challenge":

$("#qtdLote").on("change",function(){
  
    var num=parseInt($(this).val());
    $("#grupo-lotes").html(''); //limpar antes de gerar
    for(var i=1;i<=num;i++){
      $("#grupo-lotes").append($("#lote").clone().show());
    }
  
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label>Escolha</label>
  <select id="qtdLote">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</div>

<br />
<div id="lote" style="display: none">
    <label>LOTE </label>
    <input type="">
</div>
<div id="grupo-lotes">


</div>

See another example more "simplified":

$("#qtdLote").on("change",function(){
  var num=parseInt($(this).val());
 
  
  var lote = $(".lote").last();
  $("#grupo-lotes").html('');
   
    for(var i=1;i<=num;i++){
      
      $("#grupo-lotes").append($(lote).clone());
    }
  
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label>Escolha</label>
  <select id="qtdLote">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</div>

<br />

<div id="grupo-lotes">
<div class="lote">
    <label>LOTE </label>
    <input type="">
</div>
</div>

Answer 2

Your answer has already been achieved, but I did an example in PHP, in this I used a datalist, so the user can create as many fields as you want.

<?php
   echo'
   <div>
     <form method="post">
        <label>Escolha</label>
        <input list="qtd" name="quantidade"> 
        <datalist id="qtd" name="qtd">
            <option value="1"/>
            <option value="2"/>
            <option value="3"/>
        </datalist>
        <input type="submit" name="submit">
     </form>        
  </div>
  <br>';
  if(isset($_POST['submit']))
  {
      $qtd_sel = $_POST['quantidade'];
      echo '<div id="grupo-lotes">';
      while($qtd_sel > 0)
      {
          echo '
          <div id="lote">
             <label>LOTE </label>
             <input type="">
          </div>';
          $qtd_sel --;
      }
      echo '</div>';    
  }
?>