JSFiddle - React, Tailwind, and code Playground

HTML

<div class="friends" data-name="Olga Filipova">Olga</div>
<div class="friends" data-name="Olga Filipova2">Olga2</div>
<div class="friends" data-name="Olga Filipova3">Olga3</div>
<div class="friends" data-name="Francisco Ferreira">Francisco</div>
<div class="friends" data-name="Francisco Ferreira 2">Francisco2</div>
<div class="friends" data-name="Francisco Ferreira 3">Francisco3</div>
<button id="select">Select Francisco!</button>
<button id="remove">Remove Olga!</button>

CSS

.selected {
    color : blue
}

JavaScript

function FriendHandler(){ 
    if(FriendHandler.prototype.singleton){ 
        return FriendHandler.prototype.singleton; 
    }

    if(!this){
        return new FriendHandler();
    }

    FriendHandler.prototype.singleton = this;

    var NODES = { friends : $('div.friends') },
        friendNames = {};

    NODES.friends.each(function( ){ 
        var $el,
            name;
        
        $el = $(this);
        name = $el.attr('data-name').split(" "); 
        if (!friendNames[name[0]]){ 
            friendNames[name[0]] = [$el]; 
        } else { 
            friendNames[name[0]].push($el); 
        } 
    });

    this.selectFriends = function(firstName){ 
        for(var i=0; i < friendNames[firstName].length; i++){ 
            friendNames[firstName][i].addClass('selected'); 
        } 
    }

    this.removeFriends = function(firstName){ 
        for(var i=0; i < friendNames[firstName].length; i++){ 
            friendNames[firstName][i].remove(); 
        } 
        friendNames[firstName] = []; 
    }
    return this;
}
$('#select').click(function () {
    FriendHandler().selectFriends('Francisco');
});
$('#remove').click(function () {
    FriendHandler().removeFriends('Olga');
});