JSFiddle - React, Tailwind, and code Playground

by Suhaib Janjua

HTML

<div id="modalBodyContact" class="modal-body">
   <table width="100%" cellspacing="0" class="display" id="contactsTable">
      <tbody>
         <tr>
            <td>
               <p data-id="5" class="contactInfo">123321</p>
            </td>
            <td class="pull-right">
                <button data-id="5" class="edit" type="button">Edit</button>
                <button data-id="5" class="delete" type="button">Delete</button>
            </td>
         </tr>
         <tr>
            <td>
               <p data-id="6" class="contactInfo">123321</p> <---- I get this element after I click that EDIT BUTTON
            </td>
            <td class="pull-right">
                <button data-id="6" class="edit" type="button">Edit</button> // <---- I CLICK THIS then ACCESS to <p>
                <button data-id="6" class="delete" type="button">Delete</button>
            </td>
         </tr>
      </tbody>
   </table>
</div>

JavaScript

$("#modalBodyContact").on('click', 'button.edit', function () {
    alert($(this).parents('tr').find("p[data-id='" + $(this).data("id") + "']").text());
});