JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pop-friends-item">
    <label for="1" class="check_friend_item">
        <input name="invited[]" type="checkbox" value="1" > user 1</label>
</div>
<div class="pop-friends-item">
    <label for="2" class="check_friend_item">
        <input name="invited[]" type="checkbox" value="2" > user 2</label>
</div>

CSS

.selected {color:red}

JavaScript

$(document).ready(function() {
    $("label.check_friend_item").click(function() {
        $(this).closest("div").toggleClass("selected");
        var $checkbox = $(this).find('input[type=checkbox]');
        if ($checkbox.is(':checked')) {
            $checkbox.attr('checked', false);
        } else {
            $checkbox.attr('checked', true);
        }
    });
});