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

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 f-g-o">
                          <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 f-g-o">
                          <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 f-g-o">
                          <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 f-g-o change">
                          <label for="">&nbsp;</label><br/>
                          <a class="btn btn-success add-more">+ Add More</a>
                       </div>
                    </div>
                 </div>
              </div>
           </div>

Answer

 $(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 f-g-o">
                          <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 f-g-o">
                          <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 f-g-o">
                          <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 f-g-o change">
                          <label for="">&nbsp;</label><br/>
                          <a class="btn btn-success add-more">+ Add More</a>
                       </div>
                    </div>
                 </div>
              </div>
           </div>