JSFiddle - React, Tailwind, and code Playground

HTML

<div id="results">
      <ul>
         <li id="item1"></li>
         <li id="item2"></li>
         <li id="item3"></li>
         <li id="item4"></li>
         <li id="item5"></li>
      </ul>
      <p id="resultsExpl"></p>
  </div>
<form id="formId">
      <fieldset>
        <label for="toolBox" id="placeLabel">
          Type the name of a tool, then click Submit:
        </label>
        <input type="text" id="toolBox"/>
      </fieldset>
      <fieldset>
        <button type="button" id="button" onclick="processInput()">Submit</button>
        <button type="button" id ="reset" onclick="resetForm()"/>Reset</button>
      </fieldset>
  </form>

<script>
    var count=1;
    function processInput(){
        var tool = document.getElementById("toolBox").value;
        document.getElementById("toolBox").value = "";
        if(count==5){
            document.getElementById("resultsExpl").innerHTML = "Thanks for your suggestions";
            
            document.getElementById("item"+count).innerHTML = tool;
        }else{
            document.getElementById("item"+count).innerHTML = tool;
            count++;
        }
    }
     function resetForm(){
        document.getElementById("results").innerHTML = '<ul><li id="item1"></li><li id="item2"></li><li id="item3"></li><li id="item4"></li><li id="item5"></li><p id="resultsExpl"></p></ul>';
    }
</script>