javascript - Jquery add more with html object -

I am trying to create addmore functionality with the jQuery HTML Object below.

  Var addmorehtml = $ ("
 
  label name: & lt; / Label & gt; & lt; input type = 'text' name = 'catname []' gt; & lt; / div & gt; & lt; / div & gt; "); Var HTML = addmorehtml; Var Clickcount = 1; $ ('Button # addmore') ('Click', function () {HTML.find ('div.btndiv'). Rap ​​("& lt; div id = 'so_" + clickcount + "'>  ); $ ("& Lt; button class = 'removeme' onClick = 'removeMe (\" "+ clickcount +" \ ")'> remove me "). InsertBefore (HTML. Find 'Div.btndiv')); $ ('Div # result') Attachments (html.html ()); / * Why do I need to do this two steps START * / HTML.find ('div.btndiv')? Avond ("& lt; div id = 'so_" + clickcount + "'> "); HTML.find ('button.removeme'). Remove (); / * END * / clickcount ++;});  

If I do not open the HTML added at the end, then it will continue to add new elements created. I know there are many ways to add more, but if I want to go with it then the amendment should be made in the existing code so that I do not have to complete the steps mentioned in the comments.

> Any help would be appreciated.

Fiddle Link:

JSFIDDLE demo ->

You just wanted to modify your existing code, but I want to give you one more answer which I have done better than the revised answer before.

The answer given below is removed by using the clickcount and the event deletion to capture the event.

  $ ('button # addmore'). ('Click', function () {var addmorehtml = $ ("