Get textarea value from selected input by data id, from appended (jquery) elements-CodePudding

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 >

                          <div >

                            <div >
                                  <div >
                                      <div >
                                          <label >Service</label>
                                          <div >
                                              <select type="text"  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 >
                                          <label >Amount</label>
                                          <div >
                                              <input type="text"  name="amount" id="amount" placeholder="Amount">
                                        
                                          </div>
                                      </div>
                                      <div >
                                        <label >Description</label>
                                        <textarea  id="description" name="description" rows="6" placeholder="Content.." readonly></textarea>
                                    </div>
                                  </div>

                            </div>

                            
                          </div>

                      </div>
                      

                      <div >
                        <button type="button" id="addmore" >Add more</button>
                        <button type="button"   id="remove" >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');
            
})

CodePudding user response：

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 >

  <div >

    <div >
      <div >
        <div >
          <label >Service</label>
          <div>
            <select type="text"  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 >
          <label >Amount</label>
          <div>
            <input type="text"  name="amount" id="amount" placeholder="Amount">

          </div>
        </div>
        <div >
          <label >Description</label>
          <textarea  name="description" rows="6" placeholder="Content.." readonly></textarea>
        </div>
      </div>

    </div>


  </div>

</div>


<div >
  <button type="button" id="addmore" >Add more</button>
  <button type="button" id="remove" >Remove</button>
</div>