JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.test {
    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

var x = false;
var y;
$('.test').mouseenter(function() {
    y = $(this).attr('id');
    $('#'+y).css('background', 'blue');
    $('#'+y+'2').css('background', 'blue');
    $('#'+y).css('width', '80px');
});
$('.test').mouseleave(function() {
    y = $(this).attr('id');
    if(x == false){
        $('#'+y).css('background', 'green');
        $('#'+y+'2').css('background', 'green');
        $('#'+y).css('width', '40px');
    }
});
$('.test').mousedown(function() {
    $(this).css('background', 'purple');
    if(x == false) {
        x = true;
        $(this).css('border', '2px solid green');
        return;
    }
    if(x == true) {
        x = false;
        $(this).css('border', '0px solid red');
        return;
    }
});