javascript - Only the top dropdown is populating corectly. Need the same functionality with other dropdowns as well -

Adding dropdowns to my target button click The first dropdown lets me choose a sub-dropdown that is working properly but When I add another drop down, it fails.

HTML

  
  
  & lt; Div class = "mydropdown" & gt; & Lt; Div id = "dropdown" & lt; Label = "xyz" & gt; Xyz & lt; / Label & gt; & Lt; Select id = "id_xyz" name = "xyz_id" & gt; & Lt; Options & gt; - Select - & lt; / Options & gt; & Lt; Option value = "v1" & gt; Op1 & lt; / Options & gt; & Lt; Option value = "v2" & gt; Op2 & lt; / Options & gt; & Lt; / Select & gt; & Lt; Id = "v1" name = "t1" style = "display: none" class = "sub-object" & gt; & Lt; Options & gt; -Sub1- & lt; / Options & gt; & Lt; Options & gt; OPTION2 & lt; / Options & gt; & Lt; Options & gt; Option3 & lt; / Options & gt; & Lt; Options & gt; Option4 & lt; / Options & gt; & Lt; / Select & gt; & Lt; Id = "v2" name = "t2" style = "display: none" class = "sub-object" & gt; & Lt; Options & gt; -Sub2- & lt; / Options & gt; & Lt; Options & gt; OPTION1 & lt; / Options & gt; & Lt; Options & gt; OPTION2 & lt; / Options & gt; & Lt; Options & gt; Option3 & lt; / Options & gt; & Lt; Options & gt; Option4 & lt; / Options & gt; & Lt; / Select & gt; & Lt; Button class = "add_button" id = "add" & gt; Add & lt; / Button & gt; & Lt; Button class = "add_button" id = "remove" style = "display: none;" & Gt; Remove & lt; / Button & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
  Javascript:   
  $ (document) .ready (function () {$ ("# id_xyz"). ( Function () {var v = $ (this) .val (); var y = $ ("#" + v); if (v! = '') {$ ('. Sub_content'). Hide (); Y .show ();}}};}); $ (Document) .ready (function () {var counter = 2; $ ("# add") Click (function (e) {e.preventDefault (); var $ Newdiv = $ ('# dropdown') clone ("id", 'dropdown' + counter); $ ('div.mydropdown'). App ($ newdiv); $ ("# remove"). Show (); }}}});   
 Here is the link to jsfiddle:   
 
 
 When cloning your value, clone it with the  true  parameter:  
  var $ ne Wdiv = $ ('# dropdown'). Clone (true);   
 passing  true  means "cloning event":;  
 Change your  .change ()  function:  
  $ (document) .ready (function () {$ ("# id_xyz"). Changes (function () {Var v = $ (this). Find (': selected') .val (); If (v) {var y = $ (this) .closest ('# dropdown'). ("#" + V); Y.siblings ('.ub_content'). AddBack () .hide (); Y.show ();} and {$ (this) .closest ('# dropdown'). ('. Sub_content') Hide ()}}}}});   
 This allows you to change the dropdown instead of the first one instead of changing the dropdown.  
 Never copy the side note, ID.