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:white;background-color:red}

JavaScript

$("label").click(function () {
    var $this = $(this);
    $this.closest("div").toggleClass("selected");
    var $checkbox = $("input[type='checkbox']", $this);
    if ($checkbox.prop("checked")) {
        $checkbox.prop("checked", false);
    } else {
        $checkbox.prop("checked", true);
    }
});