JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post" id="achievementf1" action="">
            <span>1.</span>
            <input type="text" name="achievement1" id="achievement1" />
            <br />
            <span>2.</span>
            <input type="text" name="achievement2" id="achievement2" />
            <br />
            <span>3.</span>
            <input type="text" name="achievement3" id="achievement3" />  
            <br />                      
            <input type="submit" name="submit1" value="Registrate" />
          </form>

CSS

#border #info-box #info #box input[type="text"] {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
  height: 25px; 
  width: 650px; 
  outline: none;
}

#border #info-box #info #box input[type="submit"] {
  margin-left: 500px;
  margin-top: 10px;
  margin-bottom: 10px;
  height: 35px; 
  color: #fff;
  font-size: 20px;
  border: 2px solid #fff;
  border-radius: 8px 8px 8px 8px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 3px;
  cursor: pointer;  
}

JavaScript

$(function(){
    $(document).on("change","input", function(){
        var allGood=true;
        var lastInputField=0;
        $("input").each(function() {
            if ($(this).val() =="") {
                allGood=false;
                return false;
            }
            lastInputField++;
        });

        if (allGood) {
            $("<span>" + lastInputField + "<input type='text' id='lastinputfieldId" + lastInputField +"'" +
              "name='lastinputfieldName" + lastInputField + "'></span>").appendTo("form");
        }
    });
});