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

$('eventContainer').addEvent("click:relay(.toggleChecked)", function(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();

	
	});

	
	$('eventContainer').addEvent("click:relay(.remove)", function(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();
				
	});
	
	
	$('eventContainer').addEvent("click:relay(.add)", function(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();
		
		
	})