JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>
            <div id="Serration" class="ModList" style="width:100px;">ffffffffffffffffffffff</div>
        </td>
        <td>
            <div id="Serration2" class="ModList" style="width:100px;">ffffffffffffffffffffff</div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="Redirection" class="ModList" style="width:100px;">ffffffffffffffffffffff</div>
        </td>
        <td>
            <div id="Redirection2" class="ModList" style="width:100px;">ffffffffffffffffffffff</div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="Hello" class="ModList" style="width:100px;">ffffffffffffffffffffff</div>
        </td>
        <td>
            <div id="Hello2" class="ModList" style="width:100px;">ffffffffffffffffffffff</div>
        </td>
    </tr>
</table>

CSS

.ModList {
    height: 40px;
    width: 40px;
    background: red;
    overflow: hidden;
    -moz-transition:width 0.3s;
	-webkit-transition:width 0.3s; /* Safari */
    -o-transition:width 0.3s;
}

JavaScript

/* Brizingr5: MODLIST */
var ModList_x = false;
var ModList_y;
var ModList_obj = new Object();

$('.ModList').mouseenter(function() {
    if(ModList_obj[$(this).attr('id')] == undefined) {
       ModList_obj[$(this).attr('id')] = false;
    }
    $('#'+$(this).attr('id')+'2').css('width', '80px'); 
    $('#'+$(this).attr('id')+'2').css('background', 'blue');
});

$('.ModList').mouseleave(function() {
    if(ModList_obj[$(this).attr('id')] == false){
        $('#'+$(this).attr('id')+'2').css('width', '40px');
        $('#'+$(this).attr('id')+'2').css('background', 'purple');
    }
});

$('.ModList').mousedown(function() {
    $('#'+$(this).attr('id')+'2').css('background', 'green');
    if(ModList_obj[$(this).attr('id')] == false) {
        ModList_obj[$(this).attr('id')] = true;
        return;
    }
    if(ModList_obj[$(this).attr('id')] == true) {
        ModList_obj[$(this).attr('id')] = false;
        return;
    }
});