How do I get the value of textarea that is created in while loop-CodePudding

I have the problem, that I can't access the value my textareas which are created in a while loop of php. I guess that they are not registered in the DOM. Same is for the button that is attached to it. So I do know, that I have to access the button via jquery with the special event listener because of this dynamically creation. I get all the IDs that I need, but I am not able to get the value of the textarea, even that I can get its correct ID, as it somehow seems to be just empty. As I can't post a php fiddle in here, here is an example of how it works.

                    include"connection.php";
                    $stuff="here is the query";     
                    for ($n = 1; $n <= 13; $n  ) {
                    $xy=$con->query($stuff);
                    while($row=mysqli_fetch_assoc($xy))
                        {
                        $value = $row['value'];
                        echo"<div id='$n' class='antworten'>$value<br>
                              <div id='notizcontainer$n' class='antwortcontainer'>Notizen:</div>
                              <div class='antwortcontainer' id='notizerstellen$n'>Notiz erstellen:<br>
                              <textarea id='notizfeld' class='textarea'></textarea><br>
                              <button id='absenden' class='notizabsenden'>Notiz absenden</button></div>
                              </div>";
                            }
                     }

jQuery:

    $(document).on('click', '.notizabsenden', function(){ //do this bc its not registered and .click() is not working, also I need the click event on the button class to know on which button the event is going on
            var parentid = $(this).parent().attr('id'); //get parentid of button
            var notizid = $('#' parentid).find('textarea').attr('id'); //find id of textarea of parent 
            var notiz = $('#' notizid).val(); //this should give me the text of the textarea... but it returns empty/blank
            console.log(notizcontainer); //this turns out correct
            console.log(parentid); //this turns out correct
            console.log(notiz); //this returns empty/blank as if the textarea has nothing in it... which it does

CodePudding user response：

The issue is because the HTML in your PHP loop is re-using the same id for multiple elements when they have to be unique. To fix that problem, remove the id attributes from all repeated content.

To address the issue of accessing the textarea content, you need to use DOM traversal to find the textarea related to the button which was clicked. To do that you can use a combination of closest() and find(), like this:

$(document).on('click', '.notizabsenden', function(e) {
  const $btn = $(e.currentTarget);
  const notiz = $btn.closest('.notizerstellen').find('.notizfeld').val();
  
  console.log(notiz);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<!-- generated by your PHP loop... -->
<div >$value<br>
  <div >Notizen:</div>
  <div >
    Notiz erstellen:<br />
    <textarea >Lorem ipsum</textarea><br />
    <button >Notiz absenden</button>
  </div>
</div>

<div >$value<br>
  <div >Notizen:</div>
  <div >
    Notiz erstellen:<br />
    <textarea >Dolor sit</textarea><br />
    <button >Notiz absenden</button>
  </div>
</div>

<div >$value<br>
  <div >Notizen:</div>
  <div >
    Notiz erstellen:<br />
    <textarea >Amet consectetur</textarea><br />
    <button >Notiz absenden</button>
  </div>
</div>