How to give dynamic id to the clone div in jquery. how can i give dynamic id to the clone div?

Question

this is my JavaScript code. i tried my best can anyone help me.How to give dynamic id to the clone div in jquery. how can i give dynamic id to the clone div?It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to.

 $(document).ready(function() { $("body").on("click",".add-more",function(){ var html = $(".after-add-more").first().clone(); $(html).find(".change").html("<label for=''>&nbsp;</label><br/><a class='btn btn-danger remove'>- Remove</a>"); $(".after-add-more").last().after(html); }); $("body").on("click",".remove",function(){ $(this).parents(".after-add-more").remove(); }); });

 <div class="col-md-12 col-xl-12 col-lg-12"> <div class="after-add-more"> <div class="row"> <div class="col-lg-12 col-xl-12 col-md-12"> <div class="form-group fgo"> <label for="usr">Select Categories</label> <select class="selectpicker category form-control @error('category_id') is-invalid @enderror" name="category_id[]"> <option>Select Category</option> @foreach($categories as $category) <option value="{{$category->id}}" >{{$category->cat_name}}</option> @if(count($category->childs)) @foreach($category->childs as $cat) <option class="sub_child" value="{{$cat->id}}">-- {{$cat->cat_name}}</option> @endforeach @endif @endforeach </select> @error('category_id') <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span> @enderror </div> </div> <div class="col-lg-2 col-xl-2 col-md-12"> <div class="form-group fgo"> <label for="usr">Qty</label> <input type="number" name="qty[]" class="form-control @error('qty') is-invalid @enderror" placeholder="Qty on combo" value="{{ old('qty')?? 1 }}" required data-error="This field is required." /> <div class="help-block with-errors"></div> @error('qty') <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span> @enderror </div> </div> <div class="col-lg-12 col-xl-12 col-md-12"> <div class="form-group fgo"> <label for="usr">Select Products</label> <select class="products selectpicker form-control @error('product_id') is-invalid @enderror" multiple name="product_id[]"> </select> @error('product_id') <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span> @enderror </div> </div> <div class="col-lg-12 col-xl-12 col-md-12"> <div class="form-group fgo change"> <label for="">&nbsp;</label><br/> <a class="btn btn-success add-more">+ Add More</a> </div> </div> </div> </div> </div>

Answer 1

 $(document).ready(function() { $("body").on("click",".add-more",function(){ var html = $(".after-add-more").first().clone(); $(html).find(".change").html("<label for=''>&nbsp;</label><br/><a class='btn btn-danger remove'>- Remove</a>"); $(".after-add-more").last().after(html); }); $("body").on("click",".remove",function(){ $(this).parents(".after-add-more").remove(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-md-12 col-xl-12 col-lg-12"> <div class="after-add-more"> <div class="row"> <div class="col-lg-12 col-xl-12 col-md-12"> <div class="form-group fgo"> <label for="usr">Select Categories</label> <select class="selectpicker category form-control" name="category_id"> <option>Select Category</option> <option value="11" >11</option> <option value="12" >12</option> <option value="13" >13</option> <option class="sub_child" value="1"> 1</option> <option class="sub_child" value="2"> 2</option> <option class="sub_child" value="3"> 3</option> </select> <span class="invalid-feedback" role="alert"><strong></strong></span> </div> </div> <div class="col-lg-2 col-xl-2 col-md-12"> <div class="form-group fgo"> <label for="usr">Qty</label> <input type="number" name="qty" class="form-control" placeholder="Qty on combo" value="1" required data-error="This field is required." /> <div class="help-block with-errors"></div> <span class="invalid-feedback" role="alert"><strong></strong></span> </div> </div> <div class="col-lg-12 col-xl-12 col-md-12"> <div class="form-group fgo"> <label for="usr">Select Products</label> <select class="products selectpicker form-control is-invalid" multiple name="product_id"> <option value="a" >a</option> <option value="b" >a</option> <option value="c" >c</option> <option value="d" >d</option> <option value="e" >e</option> </select> <span class="invalid-feedback" role="alert"><strong></strong></span> </div> </div> <div class="col-lg-12 col-xl-12 col-md-12"> <div class="form-group fgo change"> <label for="">&nbsp;</label><br/> <a class="btn btn-success add-more">+ Add More</a> </div> </div> </div> </div> </div>