JSFiddle - React, Tailwind, and code Playground

by philphil

HTML

<table id="attendees_table" class="table table-striped table-hover">
    <thead>
        <tr>
            <th class="col-md-2 ">Name</th>
            <th class="col-md-2">Age</th>
            <th class="col-md-2">Media Release</th>
            <th class="col-md-2">Food Allergies</th>
            <th class="col-md-2">Special Care</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class='name'>Christipher</td>
            <td>1</td>
            <td>no</td>
            <td>peanuts</td>
            <td>test</td>
            <td><a href="http://10.10.15.30:8000/attendee/1/edit" class="edit-attendee btn btn-info btn-xs glyphicon glyphicon-pencil" data-title="Edit Attendee"></a> 
            </td>
            <td>
                <form method="POST" action="http://10.10.15.30:8000/attendee/1" accept-charset="UTF-8">
                    <input name="_method" type="hidden" value="DELETE">
                    <input name="_token" type="hidden" value="4WcM9cUxsoZJDeQ7QUQYLLGD5UWDmSxbsUbYZvnQ">
                    <button class="glyphicon glyphicon-trash btn btn-xs btn-danger del-attendee" type="button"></button>
                </form>
            </td>
        </tr>
        <tr>
            <td class="name">Meg</td>
            <td>1</td>
            <td>no</td>
            <td></td>
            <td></td>
            <td><a href="http://10.10.15.30:8000/attendee/2/edit" class="edit-attendee btn btn-info btn-xs glyphicon glyphicon-pencil" data-title="Edit Attendee"></a> 
            </td>
            <td>
                <form method="POST" action="http://10.10.15.30:8000/attendee/2" accept-charset="UTF-8">
                    <input name="_method" type="hidden" value="DELETE">
                    <input name="_token" type="hidden" value="4WcM9cUxsoZJDeQ7QUQYLLGD5UWDmSxbsUbYZvnQ">
                    <button class="glyphicon glyphicon-trash btn btn-xs btn-danger del-attendee"...

JavaScript

$(document).ready(function () {

    $('.btn.del-attendee').click(function (e) {
        e.preventDefault();
        
        name= $(this).closest('tr').find('td.name').text;
        
        alert(name);
    });
});