Automatiacally Generating text input and dropdown select on click using javascript/Jquery -

I am trying to create a system like if a user clicks on the "Add" button, it creates two text fields And select two drop-down automatically. I searched Google for the tutorial, but have managed to find me, how to add text fields only, but I have to add drop down with the option to remove.

I have some knowledge of PHP but a little bit JavaScript or Jquery

Would you please kindly help?

Here I have found that the code is:

   & Lt; Title & gt; Untitled document & lt; / Title & gt; & Lt; Script & gt; Generate function () {var d = document.getElementById ("div"); D.innerHTML + "" & lt; P & gt; & Lt; Input type = 'text' name = 'food' & gt; "; Var E = document.getElementById (" div "); E.innerHTML + =" & lt; Input type = 'text' name = 'food' & gt; "}}    
 id =" form1 "name = "Form1" method = "post" verb = "" & gt; & lt; label & gt; & lt; input name = "food" type = "article" id = "food" /> & lt; / Labels & gt; div id = "div" & gt; & lt; / div & gt; & lt; p & gt; Input type = "button" value = "add" onclick = "generRow ( ) / Lt; / p & gt; & lt; p & gt; & lt; label & gt; & lt; input type = "submit" name = "submit" value = "submit" />         Pre>  
 
 
 In jQuery, to create an element, you can do this:    var newDiv = $ ("
");  < / Pre> 
 Now, that element does not exist in the page yet. You can add it in many ways. A common perspective is to add an existing element, it will add new element to the body element:  < Pre>  newDiv.appendTo ("body");   
 Also:    $ ("body"). Attachments (newDiv);   
 and it will associate an element with the id of "foo":  
  newDiv.appendTo ("#foo");   
 Therefore, assuming you want to generate the following HTML every time you click the button:  
  & lt; Div & gt; & Lt; Input name = "a" /> & Lt; Input name = "b" /> & Lt; Select name = "c" & gt; & Lt; Option value = "0" & ​​gt; Option 1 & lt; / Options & gt; & Lt; Option value = "1" & gt; Option 2 & lt; / Options & gt; & Lt; / Select & gt; & Lt; Select name = "d" & gt; & Lt; Option value = "0" & ​​gt; Option 1 & lt; / Options & gt; & Lt; Option value = "1" & gt; Option 2 & lt; / Options & gt; & Lt; / Select & gt; & Lt; / Div & gt;   
 And suppose you want to add your div to the "div" ID, your code might look like this:  
  $ ("Input [type = button] [value = add]". Click (function (e) {e.preventDefault (); // stop submitting form. Var newDiv = $ ("& lt; div & gt; AppendTo et ("name", "a"). Appendto (newdev); $ ("& lt; input & gt;") etter ("name", "b" atri ("name", "c "Appendo" (newDiv) .Append ($ ("(LT; option>"). Val ("0" "(" Option "), $ (" Option 1 "), $ (" & lt; & Gt; "). Text ("Option 2"); $ ("& lt; Select & gt;"). Attr ("(" Option "), $ (" & lt; Option & gt; ") (AppendTo (newDiv) .append ($ ("& lt; option & gt;") Val ("0"). Val ("1"). Text ("Option 2"));});   
 Here's an example of a work:  
  Edit:  Adding the Remove button will allow you to enter an  & lt; button & gt;  In the same way we can create our other elements, then add a click handler which removes the parent device. Add:  
  $ ( "& lt; Button & gt; "). Text (" Remove "). AppendTo (newDiv) .click (function (e) {e. PreventDefault (); // Stop submitting the form. $ (This) .Parent (). (); // Alternatively, you can say: newDiv.remove ();});   
 Renewed example: