this is an input table to laravel database, I want to regenerate this div when the user press a button a new div with a different id and a different name to pass it in the controller, what is the way to do it and what should my controller looks

<div class="container-fluid" style="display:block" id="div1">
<div class="fade-in">
<div class="card">
<div class="card-header"> pricing </div>
{{-- {{ $locations->name }} --}}
<script>
counter  =1;
  
</script>
<div class="card-body">                      
      <div class="body">

        <div class="form-group">
          <label for="exampleFormControlInput1">car number</label>
          <input type="text" class="form-control" name="carnumber" id="exampleFormControlInput1" placeholder="car number">
        </div>   
        <div class="form-group">
          <label for="exampleFormControlInput1">price</label>
          <input type="text" class="form-control" name="price" id="exampleFormControlInput1" placeholder="price">
        </div>  
        <div class="form-group">
          <label for="exampleFormControlInput1">min day</label>
          <input type="text" class="form-control" name="minday" id="exampleFormControlInput1" placeholder="min day">
        </div>  
        <div class="form-group">
          <label for="exampleFormControlInput1">sale price</label>
          <input type="text" class="form-control" name="saleprice" id="exampleFormControlInput1" placeholder="sale price">
        </div>  
        <div class="form-group">
          <label for="exampleFormControlInput1">min day stay</label>
          <input type="text" class="form-control" name="mindaystay" id="exampleFormControlInput1" placeholder="min day stay">
        </div>  
        

</div>
</div>
</div>
</div>
</div>

CodePudding user response：

I assume you mean this

I wrapped the label so you do not need the number either

NOTE I added [] to the name, that way your server will receive an array of values

$(function() {
  $("#add").on("click", function() {
   const $div = $("#div1 .card").eq(0).clone(true)
    $div.find('input').each(function() {
      this.value="";
    })
    $("#div1").append($div)
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button type="button" id="add">ADD</button>
<div class="container-fluid" style="display:block" id="div1">
  <div class="fade-in">
    <div class="card">
      <div class="card-header"> pricing </div>
      <div class="card-body">
        <div class="body">
          <div class="form-group">
            <label>car number
              <input type="text" class="form-control" name="carnumber[]" placeholder="car number">
            </label>
          </div>
          <div class="form-group">
            <label>price
              <input type="text" class="form-control" name="price[]" placeholder="price">
            </label>
          </div>
          <div class="form-group">
            <label>min day
              <input type="text" class="form-control" name="minday[]" placeholder="min day">
            </label>
          </div>
          <div class="form-group">
            <label>sale price
              <input type="text" class="form-control" name="saleprice[]" placeholder="sale price">
            </label>
          </div>
          <div class="form-group">
            <label>min day stay
              <input type="text" class="form-control" name="mindaystay[]" placeholder="min day stay">
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

If you must:

$(function() {
  $("#add").on("click", function() {
    const $div = $("#div1 .card").eq(0).clone(true);
    const idx = $("#div1 .card").length;
    $div.find('input').each(function() {
      this.value="";
      this.name = this.name.replace(/\[(\d )\]/,idx)
    })
    $("#div1").append($div)
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button type="button" id="add">ADD</button>
<div class="container-fluid" style="display:block" id="div1">
  <div class="fade-in">
    <div class="card">
      <div class="card-header"> pricing </div>
      <div class="card-body">
        <div class="body">
          <div class="form-group">
            <label>car number
                  <input type="text" class="form-control" name="carnumber[0]" placeholder="car number">
                </label>
          </div>
          <div class="form-group">
            <label>price
                  <input type="text" class="form-control" name="price[0]" placeholder="price">
                </label>
          </div>
          <div class="form-group">
            <label>min day
                  <input type="text" class="form-control" name="minday[0]" placeholder="min day">
                </label>
          </div>
          <div class="form-group">
            <label>sale price
                  <input type="text" class="form-control" name="saleprice[0]" placeholder="sale price">
                </label>
          </div>
          <div class="form-group">
            <label>min day stay
                  <input type="text" class="form-control" name="mindaystay[0]" placeholder="min day stay">
                </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>