How to pass value of dynamically created button and textarea to modal using JQuery & PHP

Problem: Cannot send value of button and textarea to jquery What needs to happen: Click update button, opens modal. Modal displays textarea contents, and then that textarea can be edited in modal and then click UPDATE button in modal to send contents of textarea to jquery to then be sent to server.

Here is my php code for the content and the modal that displays the value. The proper value displays in the modal. And the first value sends properly, but cannot get the other values to work. I am thinking an ID needs to be attached to the modal to get each dynamically created value to send but I just can't get it to work.

foreach($results as $row){    <td><textarea id="contentAdminUpdate" name="contentAdminUpdate" style="min-width:100%;height:100%;">'.$row['ad_content'].'</textarea></td>    <td><button type="submit" class="btn btn-success updateContent">UPDATE</button></td>      /*Modal display*/  <div class="container">  <div class="row">      <div class="col-sm-12" id="center-div">          <form onsubmit="return false;">              <div class="modal fade" id="contentSendModal-'.$row['ad_id'].'" role="dialog">                  <div class="modal-dialog">                  <div class="modal-content">                      <div class="modal-header">                          <button type="button" class="close cl-upd-idx" data-dismiss="modal">&times;</button>                              <h3 class="modal-title">Update Content</h3>                          </div>                          <div class="modal-body">                              <div class="content">                                                                     <div class="form-group">                                                                              <textarea class="form-control" name="sendContent" rows="5" cols="50" id="sendContent" autofocus required>'.$row['ad_content'].'</textarea>                                      <input type="text" name="userMsg" id="userMsg-'.$row['ad_id'].'" class="form-control" style="display:none;" hidden>                                  </div>                                                            </div>                      </div>                      <div class="modal-footer" style="text-align:left;">                          <p><a type="submit" id="contentMessage" name="contentMessage" data-user-id="contentMessage" class="sty-btn-clr boldTextLink panelBGSHSM" style="width:100%;">UPDATE CONTENT</a></p>                                                           </div>                          </div>                      </div>                  </div>              </div>          </form>       </div>    </div>  </div>  }  

Here is the modal. All of the content displays properly in the content. What I want is to be able to edit this content and send that value to jquery. Only the first value sends properly. I tried attaching the ID to the UPDATE button but did not work for me. Thanks for any and all help.

This is the jquery I am trying to figure out

//Update user content  $(".updateContent").on("click", function(){      var content = $(this).attr('data-updateContent-id');      $(".modal-body #contentMessage").val(content);      $("#contentMessage").data('user-id', content);        var contentid = $(this).data('username-modal');  });    $("#contentMessage").on("click", function(){      var contentid = $("#contentMessage").data('user-id');         var content = $("#sendContent").val();      //submitContent(contentid, content );            alert(content);        });  

https://stackoverflow.com/questions/67327674/how-to-pass-value-of-dynamically-created-button-and-textarea-to-modal-using-jque April 30, 2021 at 11:04AM