JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="chooseCat">
<li class="chooseCategory16"><a href="#" rel="16">special cat- 16</a></li>
<li class="chooseCategory30"><a href="#" rel="30">test - 30</a></li>
<li class="chooseCategory50"><a href="#" rel="50">test - 50</a></li>
<li class="chooseCategory55"><a href="#" rel="55">special cat- 55</a></li>
<li class="chooseCategory17"><a href="#" rel="17">test - 17</a></li>
<li class="chooseCategory23"><a href="#" rel="23">test - 23</a></li>
</ul>

CSS

li a {color:#000;}
li.selected a {color:red;}

JavaScript

$('.chooseCat li').on('click',function(){
    var $this = $(this);
    var catId =  $this.children("a").attr("rel");
    var specialCat = ['16','55'];    
    
    if ($this.hasClass("selected")) {
        $this.removeClass("selected");
    }else{
        if( $.inArray(catId, specialCat) !== -1  ) {
            $('.chooseCat li').removeClass("selected");
                $this.addClass("selected");
        } else {
            if ($('.chooseCat li.selected').length <= 2){
                $this.addClass("selected");
            } else {
               $("#categorySuggestions p.error").show("fast").html("You cannot select any more categories");
            }
        }
    }
});