How do I target dynamic buttons created with different values jQuery

December 15, 2021

I have a button where when it’s clicked I want the text to change to something else now the problem is that the button has the same class and everything as the other buttons on the page which will be generated dynamically since it’s inside a foreach

How can I target only the button I click to change the text I have different values for each button can I use that?

<label class="more-information" value="{I call a data id with php}">
 <span class="more-info-text">Default text</span>
</label>

$('.more-information').on('click', function () {
      $(this).toggleClass('active');
      $(this).hasClass('active') ? $(".more-info-text").text('Default Text') : $(".more-info-text").text('Changed Text');

    });

This is what I’m currently using and it changes the text for all the buttons only when one button is clicked

>Solution :

$('.more-information').on('click', function () {
      $(this).toggleClass('active');
      $(this).hasClass('active') ? $(this).find(".more-info-text").text('Default Text') : $(this).find(".more-info-text").text('Changed Text');

});

$(this).find(".more-info-text") will find the exact label for you on the click.