title: Why is my increment-er returning an object? id_[object HTMLInputElement]
body: <p>In my form, I want to offer the ability to add another location. It was working when I had only one text box appear,(address) and could get multiple address text boxes to appear. but now I am trying to add the "city" text-box and it is not working.  I used one function before, now I split up my functions to reuse code better.  So now my id's (id_) should be id_1,id_2,ect. but I am getting the object instead.  I think the addLoc() should be on its own, vs <strong>function city()</strong> inside <strong>function addLoc()</strong>, but that wasnt working either.</p>
  
  <p><a href="https://i.stack.imgur.com/cIoxI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cIoxI.jpg" alt="page source"></a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="one"&gt;
      &lt;button onclick="addLoc()"&gt;Add Location&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="three"&gt;
      &lt;h2&gt;Locations&lt;/h2&gt;
      &lt;form action="#" id="mainform" method="get" name="mainform"&gt;
          &lt;div id="myForm"&gt;&lt;/div&gt;
          &lt;input type="submit" value="Submit"&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>javaScript</p>
  
  <pre><code>var i = 0; 
    function increment(){
      i += 1; 
    }
  function addLoc(){
    var d = document.createElement("DIV");        
    var l = document.createElement("LABEL");      
    var i = document.createElement("INPUT");
  
    address();    
    city();
    function address() {
  
      i.setAttribute("type","text");
      i.setAttribute("placeholder","Address");
  
      build();        
    }
    function build() {            
      var g = document.createElement("IMG");
      g.setAttribute("src", "delete.png");
  
      increment();
      i.setAttribute("Name","textelement_" + i);
      d.appendChild(l);
      l.setAttribute("for","textelement_" + i);       
  
      g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
      d.appendChild(g);
      d.setAttribute("id","id_" + i);
      document.getElementById("myForm").appendChild(d);       
    }
    function city() {     
      i.setAttribute("type","text");
      i.setAttribute("placeholder","City");
      build();
    }
  }//end of addLoc()
  </code></pre>
  
  <p>Here is the <a href="https://jsfiddle.net/jim54729/w27pka3c/" rel="nofollow noreferrer">jsFiddle</a> (some changes)</p>
  
  <p>was working fine with just the address text box.  I broke something trying to split up the functions.  I can do it all as one BIG function, but prefer not to.
  Any help Much appreciated! </p>