JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<div class="wrapper">
    <ul class="form">
        <li class="section">
            <input type="text" value="Sample text 1" />
        </li>
        <li class="section">
            <input type="text" value="Sample text 2" />
        </li>
        <li class="section">
            <input type="text" value="Sample text 3" />
        </li>
        <li class="section">
            <input type="text" value="Sample text 4" />
        </li>
        <li class="section">
            <input type="text" value="Sample text 5" />
        </li>
        <li class="section">
            <input type="text" value="Sample text 6" />
        </li>
        <li class="section">
            <input type="text" value="Sample text 7" />
        </li>
        <li class="section">
            <input type="text" value="Sample text 8" />
        </li>
        <li class="section">
            <input type="text" value="Sample text 9" />
        </li>
        <li class="section">
            <input type="text" value="Sample text 10" />
        </li>
    </ul>
</div>

CSS

.wrapper
{
    background-color: yellow;
    height: 200px;
    overflow-y: hidden;
}
ul.form {
}

JavaScript

$('.section').eq(6).find('input').focus();