title: Add, remove input box using javascript
body: <p>So what i am trying to do is to have </p>
  
  <p>1.add function to add an input box</p>
  
  <p>2.remove function to remove the last input box in the list</p>
  
  <p>3.sort function to sort the list of input texts by alphabetic order</p>
  
  <p>I think my add function is working, but i am running into problem when i am trying to remove the last input box or trying to sort it.
  Any idea or suggestion would be very much appreciated. thanks</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="mainform" &gt;
  &lt;button onclick="add()"&gt;add&lt;/button&gt;
  &lt;button onclick="remove()"&gt;remove&lt;/button&gt;
  &lt;button onclick="sort()"&gt;sort&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;script&gt;
      var i = 0;
      var count =0;
      function add() {  
           var x= document.createElement("INPUT");
           x.setAttribute("type", "text");
           x.setAttribute("placeholder", "Name");
           i += 1;
           count=count+1;
           document.body.appendChild(x);
      }    
      function remove(){
           i -= 1;
           count=count-1;
      }
      
      function sort(){
           var x;
           x=count;
           var strings=[]
           var t;
           var i=0;
           t=x;
           while(t!=0){
                strings.push(document.forms["mainform"].elements[i].value);
                t=t-1;
                i=i+1}
     
           strings=strings.sort()
           var j=0;
           var msg='';
           while(x!=0){
                var msg=msg+strings[j]+'\n';
                document.forms["mainform"].elements[j].value=strings[j];
                j=j+1;
                x=x-1;}
     }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>