JSFiddle - React, Tailwind, and code Playground

HTML

<script>
function check(tr) {
    var id = $(tr).data("id");
    var hdn = $('[name="stall_id"]'), val;
    var text = $(tr).html();  
    if (text == 'Add') {
        val = hdn.val() == '' ? id : hdn.val() + ',' + id;
    } else {
        val = hdn.val().split(',').filter(function (d) {
            return d != id;
        }).join(',');
    }   
   $(tr).html(text == 'Add' ? 'Remove' : 'Add');
    hdn.val(val);
    alert(hdn.val());
}   
</script>
<input type="hidden" value="" name="stall_id">
<a href='javascript:;' onclick='check(this)' data-id='1'>Add</a>
<a href='javascript:;' onclick='check(this)' data-id='2'>Add</a>
<a href='javascript:;' onclick='check(this)' data-id='3'>Add</a>

CSS

body {
    font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif;
}
.tag {
    color: #3E6D8E;
    background-color: #E0EAF1;
    border-bottom: 1px solid #b3cee1;
    border-right: 1px solid #b3cee1;
    padding: 3px 4px 3px 4px;
    margin: 2px 2px 2px 0;
    text-decoration: none;
    font-size: 90%;
    line-height: 2.4;
    white-space: nowrap;
}
.tag:hover {
    background-color: #c4dae9;
    border-bottom: 1px solid #c4dae9;
    border-right: 1px solid #c4dae9;
    text-decoration: none;
}

 .cross{
            background-color:#cd5c5c;
            border-radius: 30px;
            padding: 2px;
        }

        .cross:hover{
            background-color:red;
        }