JSFiddle - React, Tailwind, and code Playground

HTML

<div id="eventContainer">
    
    <div class="whatever">
        <p>Title</p>
        <p>Some thing</p>
        <p><a href="" class="button remove" id="id_123">Remove This</a></p>
        <p><a href="" class="button add" id="id_123">Add This</a></p>
        <p><i class="fa fa-status-True toggleChecked" id="id_123">icon here</i></p>
    </div>

    <div class="whatever">
        <p>Title</p>
        <p>Some thing</p>
        <p><a href="" class="button remove" id="id_124">Remove This</a></p>
        <p><a href="" class="button add" id="id_124">Add This</a></p>
        <p><i class="fa fa-status-True toggleChecked" id="id_124"></i></p>
    </div>

    <div class="whatever">
        <p>Title</p>
        <p>Some thing</p>
        <p><a href="" class="button remove" id="id_125">Remove This</a></p>
        <p><a href="" class="button add" id="id_125">Add This</a></p>
        <p><i class="fa fa-status-True toggleChecked" id="id_125">icon here</i></p>
    </div>
    <div class="whatever">
        <p>Title</p>
        <p>Some thing</p>
        <p><a href="" class="button remove" id="id_126">Remove This</a></p>
        <p><a href="" class="button add" id="id_126">Add This</a></p>
        <p><i class="fa fa-status-True toggleChecked" id="id_126">icon here</i></p>
    </div>

        <div class="whatever">
        <p>Title</p>
        <p>Some thing</p>
        <p><a href="" class="button remove" id="id_127">Remove This</a></p>
        <p><a href="" class="button add" id="id_127">Add This</a></p>
        <p><i class="fa fa-status-True toggleChecked" id="id_127">icon here</i></p>
    </div>
    
   <div class="whatever">
        <p>Title</p>
        <p>Some thing</p>
        <p><a href="" class="button remove" id="id_128">Remove This</a></p>
        <p><a href="" class="button add" id="id_128">Add This</a></p>
        <p><i class="fa fa-status-True toggleChecked" id="id_128">icon here</i></p>
    </div>
</div>

CSS

#eventContainer {border:solid; padding:20px;}
.whatever {border:1px solid #ddd; background:#ffd; margin:10px;}

JavaScript

function toggleChecked(event, element) {
    event.preventDefault();
    arr = element.id.split('_')
    
    var req = new Request({
        method: 'post',
        url: '/echo/html/',
        data: { 'check' : '1', 'ID' : arr[1]},
        onComplete: function(response) { 
            el = $(event.target.id);
            if(el.hasClass('fa-status-True')){
                el.removeClass('fa-status-True fa-status-False')
                el.addClass('fa-status-False')	
            }else{
                el.removeClass('fa-status-True fa-status-False')
                el.addClass('fa-status-True')	
            } 
        }
    }).send();
}

function remove(event, element) {
    event.preventDefault();
    arr = element.id.split('_')
    
    var req = new Request({
        method: 'post',
        url: '/echo/html/',
        data: { 'remove' : '1', 'ID' : arr[1]},
        onComplete: function(response) { 
            $('id_'+arr[1]).dissolve()
        }
    }).send();				
}
	
function add(event, element) {
    event.preventDefault();
    arr = element.id.split('_')
    
    var req = new Request({
        method: 'post',
        url: '/echo/html/',
        data: { 'add' : '1', 'ID' : arr[1]},
        onComplete: function(response) { 
            $('id_'+arr[1]).set('html','Whatever')
        }
    }).send();
}
    
$('eventContainer').addEvents({
    "click:relay(.toggleChecked)": toggleChecked,
    "click:relay(.remove)": remove,
    "click:relay(.add)": add
});