javascript - Dynamically add drop-down lists to html form -

I have the following code:

It does not seem to work on Jsfiddle But it works fine on almost normal webpages.

I have received the code online but I have touched it and I am trying to add a button to add a new text box under the existing one. I am trying to call the addNew () function for it, but it seems that instead of just adding one, will I continue?

The second thing I see is that it explicitly adds a new textbox but I want to add 3 drop-downs: /

Specifically, This will be the following:

  & lt; Id = "tag" name = "select tag" category = "tag" & gt; & Lt; Option value = "tag" selected = "selected" & gt; Tag & lt; / Option & gt; & Lt; Option value = "agent" & gt; Agent & lt; / Options & gt; & Lt; Option value = "extension" & gt; Extensions & lt; / Options & gt; & Lt; Option value = "file vision" & gt; Fireworld & lt; / Options & gt; & Lt; / Select & gt; & Lt; Id = "operand" name = "operand" class = "operand"> & Lt; Options & gt; Operand & lt; / Options & gt; & Lt; / Select & gt; & Lt; Id = "value" name = "value" class = "value" & gt; & Lt; Options & gt; Prices & lt; / Options & gt; & Lt; / Select & gt;   
 I do not have the best way to do this - e.g. Perhaps by putting it into a div and creating a variable based on this div and duplicating it in the addNew function?  
 Any help was greatly appreciated.  
 Regards, Martin   
 
 
  
 An important change:  
  newAddButton.onclick = addNew;   
 You were doing something like  newAddButton.onclick = addNew () {}; If you have an error, either you implement the function, i.e.  addNew () , or an anonymous function, i.e.  function () {} , though < There is no such thing as code> addNew () {} , but it is completely unrelated).  
 Oh and Second: The difference between your site and JSField was seen, because you were executing your Javascript, which means that JSField will wrap it, and globals, such as function  addNew < / Code> will not be visible from your inline event handlers (which you should change anyway). Note that I have a  no wrap  on my snippet  
 There are some significant changes in it (such as increments, and semicolons) that do not break it, but just my style is high.  
 Regarding adding a new toolbox and not just adding one textbox, welcome to Flame War (which is probably too much dead) about proper DOM culture. You can contact it in two ways (more, but they will eventually boil up to two ways), either the new  & lt; Div & gt; Make   as you are doing, lots of  appendbill  and  create element  calls, which is the "cleaner" method that uses standard DOM functions. Or you can use  innerHTML , which accepts a huge string and can parsing itself.  
 In addition to being the "first standard", "more standard", this means price injection is even more formal, so if you want to change an attribute for example, then you do this in a JavaScript coded manner. , As opposed to embedding values ​​in the string and parsing it to the browser.  
 The main advantage is the second way is that it's very fast, it will not make any difference to some dropdown boxes, but when you have many things to render each DOM function, then There is a slight slow motion, and if there is a need to render in between the things.  
 Either extend your current method and add a dropdown, or go to "Previous"  Internal HTML  approach  
 Hope you go is sufficient.