JSFiddle - React, Tailwind, and code Playground

HTML

<select name="cat_1" id="cat_1">
    <option value="0">I</option>
    <option value="1">II</option>
    <option value="2">III</option>
</select>
<select name="cat_2" id="cat_2">
    <option value="0">A</option>
    <option value="1">B</option>
    <option value="2">C</option>
</select>
<select name="cat_3" id="cat_3">
    <option value="0">a</option>
    <option value="1">b</option>
    <option value="2">c</option>
</select>
<input type="button" id="addButton" value="Add">
<br />Combinations: <span id="combContainer"></span>

<br />Expected hidden: <span id="expected"></span>

JavaScript

$('#addButton').on('click', addButtonClicked);
function addButtonClicked(event) {
    
    var cat1 = $('#cat_1 option:selected').val();
    var cat2 = $('#cat_2 option:selected').val();
    var cat3 = $('#cat_3 option:selected').val();
    
    if ($('#combContainer:contains("[' + cat1 + ', ' + cat2 + ', ' + cat3 + ']")').length == 0) {
        $('#combContainer').append('<div><span class="comb">[' + cat1 + ', ' + cat2 + ', ' + cat3 + ']</span> <span id="combDel">remove</span></div>');
    }

    var arr = [];
    $('.comb').each(function (index, elem) {
        arr.push($(this).text());
        $('#expected').text(arr.join(''));
    });

    $("#combContainer").on("click", "#combDel", function () {
        var text = $(this).closest("div").children( ".comb" ).text();
        if ($('#combContainer:contains("[' + text + ']")').length == 0) {
            $(this).closest("div").remove();
            var expectedText = $("#expected").text();
            var newExpectedText = expectedText.replace(text, '');
            $("#expected").text(newExpectedText);
        }   
    });
    
}