JSFiddle - React, Tailwind, and code Playground

by akash singh

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

$("button.edit").on('click', function(){
   var contact_id   = $(this).attr("data-id");
    var text   = $(".contactInfo[data-id="+contact_id+"]").text();
    
 alert("id is "+contact_id+" text is"+text);
    
});