JSFiddle - React, Tailwind, and code Playground

HTML

<li id=recordsArray_1>
    <form medthod=post name=fr_1 id=fr_1>
        <input type=text name=a>
        <input type=text name=b>
        <input type=text name=c>
        <input type=submit name=b_1 value=ok>
    </form>
</li>
<li id=recordsArray_2>
    <form medthod=post name=fr_2 id=fr_2>
        <input type=text name=a>
        <input type=text name=b>
        <input type=text name=c>
        <input type=submit name=b_2 value=ok>
    </form>
</li>
<li id=recordsArray_3>
    <form medthod=post name=fr_3 id=fr_3>
        <input type=text name=a>
        <input type=text name=b>
        <input type=text name=c>
        <input type=submit name=b_3 value=ok>
    </form>
</li>

CSS

li {
        position:relative;
        z-index: 1;
        pointer-events: none;
    }
    li:hover {
        background-color: red;
    
    }
    input {
        position: relative;
        z-index: 2;
        pointer-events: all;
    }