javascript创建具有不同属性的html

Question

这是 laravel 数据库的输入表，我想在用户按下按钮时重新生成这个 div我的控制器应该是什么样子

<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>

Answer 1

我猜你的意思是这个

我包装了标签，所以你也不需要数字

注意我在名称中添加了 []，这样您的服务器将 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>

如果你必须：

$(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>