JSFiddle - React, Tailwind, and code Playground

HTML

<div id="id1">c</div>
<div id="id2">a</div>
<div id="id3">cc</div>
<div id="id4">aa</div>

<span id="hook">click me</span>

CSS

.has-warning{
    color: white;
    background-color: red;
}

[disabled="disabled"]{
    color: darkgrey;
    background-color: grey;
}

span{
    display: block;
    margin-top: 40px;
    background-color: green;
    padding:5px;
    color: blue;
}

JavaScript

$(document).ready(function () {
    var disableAndWarn = function (config) {
        console.log("#" + config.id1 + ', ' + "#" + config.id2);
        $("#" + config.id1 + ', ' + "#" + config.id2).attr('disabled', 'disabled');
        $("#" + config.id3 + ', ' + "#" + config.id4).addClass('has-warning');
    }

    $("#hook").on('click', function () {
        disableAndWarn({
            id2: 'id2',
            id3: 'id3',
            id4: 'id4'
        })
    });
});