JSFiddle - React, Tailwind, and code Playground

by flackend

HTML

<a href="#">foo</a>

<table class="table table-bordered">
    <tr class="friendRequest" data-buddy="36">
        <td>36</td>
        <td><button class="friend-request-action btn" value="confirm"/>Confirm</td>
        <td><button class="friend-request-action btn" value="deny"/>Deny</td>
    </tr>
    <tr class="friendRequest" data-buddy="37">
        <td>37</td>
        <td><button class="friend-request-action btn" value="confirm"/>Confirm</td>
        <td><button class="friend-request-action btn" value="deny"/>Deny</td>
    </tr>
</table>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

JavaScript

$('a').click(function() {alert('adsd'); return false;});

$('tr.friendRequest').find('button.friend-request-action').on('click', function() {

	// Cache variables
	var $this = $(this);
	var $friendRequest = $this.closest('tr.friendRequest');
	var action;
	
	// Check if the user is confirming or denying
	if($this.val() == 'confirm') {

		action = 'confirm';

	} else {

		action = 'deny';
	}

	// Make call!
	$.ajax({
		url:  '/echo/json/',
		type: 'POST',
        data: {
            json: JSON.stringify({
                buddyId: $friendRequest.data('buddy'),
                action: action
            })
        },
		success: function(data) {
            
            console.log(data);
		}
	});
});