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

var myapp = {
    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();
    },
    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();	
    },
    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();
    },
    init: function(container){
        $(container).addEvents({
            "click:relay(.toggleChecked)": this.toggleChecked,
            "click:relay(.remove)": this.remove,
            "click:relay(.add)": this.add
        });
    }
};

myapp.init('eventContainer');