JSFiddle - React, Tailwind, and code Playground

HTML

<form id="main" action="" method="post">
    <input name="ns" id="ns0" value="first" /> <br />
    <input name="ns" id="ns1" value="2nd" /> <br />
    <input name="ns" id="ns2" value="" /> <br />
    <input name="ns" id="ns3" value="" /> <br />
    <input name="ns" id="ns4" value="" /> <br />
    <input name="ns" id="ns5" value="" /> <br />
    <input name="ns" id="ns6" value="" /> <br />
</form>
<p>
    The go button should append "next one" inside the first empty input<br />
    <a href="#" id="go">go (non working)</a>
    &nbsp;-&nbsp;
    <a href="#" id="go2">go (working)</a>
    &nbsp;-&nbsp;
    <a href="#" id="go3">go (working too)</a>
</p>

JavaScript

$("#go").click(function(e) {
    e.preventDefault();
    $("#main input:text[value='']:first").val("next one");
});

$("#go2").click(function(e) {
    e.preventDefault();
    $("#main input:text[value='']").eq(0).val("next one");
});


$("#go3").click(function(e) {
    e.preventDefault();
    $("input:text[value='']:first").val("next one");
});