从附加的（jquery）元素中按数据ID从选定的输入中获取textarea值

Question

I was able to get the value for Description (textarea) from the first service (selected input) (which is right), for the attribute of data id, but I'm having a problem getting it from appended elements, after using the add more button

What am I missing, please?

Below is my code and I can explain further if need be.

 <div class="service-box">

                          <div class="row">

                            <div class="col-md-12 service-group">
                                  <div class="row">
                                      <div class="form-group mb-3 col-md-6">
                                          <label class="form-label">Service</label>
                                          <div >
                                              <select type="text" class="form-select" placeholder="Services" value="" name="service" id="service">
                                                  <option value="" disabled selected>Select your option</option>
                                                  @foreach ($services as $service)
                                                      <option value="{{$service->service_name}}"  data-id="{{$service->description}}">{{$service->service_name}}</option>
                                                  @endforeach
                                                  
                                                  
                                              </select>
                                              
                                          </div>
                                          </div>
              
                                          <div class="form-group mb-3 col-md-6">
                                          <label class="form-label">Amount</label>
                                          <div >
                                              <input type="text" class="form-control" name="amount" id="amount" placeholder="Amount">
                                        
                                          </div>
                                      </div>
                                      <div class="form-group mb-3 col-md-12">
                                        <label class="form-label">Description</label>
                                        <textarea class="form-control" id="description" name="description" rows="6" placeholder="Content.." readonly></textarea>
                                    </div>
                                  </div>

                            </div>

                            
                          </div>

                      </div>
                      

                      <div class="col-md-12">
                        <button type="button" id="addmore" class="btn btn-default">Add more</button>
                        <button type="button"   id="remove" class="btn btn-default">Remove</button>
                      </div>

$("#addmore").click(function() {

    var serviceGroupHTML = $('.service-group').html();
    $( ".service-box" ).append(serviceGroupHTML);
    
    
});

$("#remove").on("click", function() {  
    $(".service-box").children().last().remove();  
});  


<!-- This is where the problem lies -->
const service = new Array(document.getElementById("service"));
const description = new Array(document.getElementById("description"));

service[0].addEventListener("change", function(){
    description[0].value =  $('#service option:selected').data('id');
            
})


service[1].addEventListener("change", function(){
  description[1].value =  $('#service option:selected').data('id');
            
})

Answer 1

As your newly created element are dynamic so you need to bind it with static element. Then, you can get the value of the data-attribute by using $(this).find("option:selected").data("id") and assign this to your textarea of that particular group.

Demo Code :

 $("#addmore").click(function() { $('.service-group:first').clone().find("input:text,textarea").val("").end().appendTo('.service-box'); }); $("#remove").on("click", function() { $(".service-box").children().last().remove(); }); $("body").on("change", "select[name=service]", function() { //get description for data-attribute var description = $(this).find("option:selected").data("id"); //assign value $(this).closest(".service-group").find("textarea[name=description]").val(description) })

 <:-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css"> <.-- jQuery library --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery:min.js"></script> <.-- Latest compiled JavaScript --> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div class="service-box"> <div class="row service-group"> <div class="col-md-12"> <div class="row"> <div class="form-group mb-3 col-md-6"> <label class="form-label">Service</label> <div> <select type="text" class="form-select" placeholder="Services" value="" name="service"> <option value="" disabled selected>Select your option</option> <option value="1" data-id="This test">XYZ</option> <option value="1" data-id="This test22">Z22</option> <option value="1" data-id="This test33">YZ33</option> </select> </div> </div> <div class="form-group mb-3 col-md-6"> <label class="form-label">Amount</label> <div> <input type="text" class="form-control" name="amount" id="amount" placeholder="Amount"> </div> </div> <div class="form-group mb-3 col-md-12"> <label class="form-label">Description</label> <textarea class="form-control" name="description" rows="6" placeholder="Content.." readonly></textarea> </div> </div> </div> </div> </div> <div class="col-md-12"> <button type="button" id="addmore" class="btn btn-default">Add more</button> <button type="button" id="remove" class="btn btn-default">Remove</button> </div>