Clone and autopopulating of dropdown list problem with Jquery

I have a form in a page. In the form i have a text box and a dropdown list. I am using ajax to send the selected value from the dropdown list to another page, where it is send the appropriate values back to the page which auto populates a new dropdown list. They is also a choice that user can add more from like above.

But the problem i am getting is that when i clone the parent form, the value of both auto populated dropdown lists changes by changing the value in the clone dropdown list.

Please help me how to solve that problem. here is my code.

<!--This is script for autopopute the dropdown list -->    
<script type="text/javascript">
$(document).ready(function(){ 
$("#selectionresult").hide(); 

$(".MyDropDown").change( function() { 
    $(".MyDropDown1").hide(); 
    $("#result").html('Retrieving ...'); 
    $.ajax({ 
        type: "POST", 
        data: "data=" + $(this).val(), 
        url: "t.cshtml", 
        success: function(msg){ 
            if (msg != ''){ 
                $(".MyDropDown1").html(msg).show(); 
                $("#result").html(''); 
            } 
            else{ 
                $("#result").html('<em>No item result</em>'); 
            } 
        } 
    }); 
}); 
}); 
</script>


<!-- This is my html code -->
<form method="post" action="">
<fieldset>
<p class="clone"><input type="text" name="hobby[]" class='input'/>
<label for="selection"> Select a Option:  

<select id="selection" name="selection" class="MyDropDown" >
<option value="">- Select Option Here -</option>
<option value="ip">IP</option>
<option value="responsecode">Response Code</option>
<option value="responsebody">ResponseBody</option>
<option value="filename">File Name</option>
<option value="keyword">Keyword</option>
</select>         </label>

<select id="selectionresult" class="MyDropDown1" name="selectionresult"></select>
</p>
<p id开发者_JAVA百科="result">&nbsp;</p>

<input type="submit" value=" Submit " />
</fieldset>
</form> 
<p><a href="#" class="add" rel=".clone">Add More</a></p>

I tried hard to be good in formatting. Please Help me. This is my HTML code.

Do you change the class or ID of the cloned list? In looking at your code, it appears that it is simply looking for any "Change" in .MyDropDown1 class. Thus if you clone that, a change in the new clone - with the same class would cause a change to the others (assuming I understand your question correctly).

So change the cloned class (and wire up any code) OR if you make a more specific selector such as #selection . If you want to work on the cloned item, then use the .clone > .MyDropDown1 (or a new ID you have assigned it). The point being, change your selectors so the event is working on the items you wish - either by making the selectors more specific and/ or changing the ID.

To change the id or class simply take the element you are cloning and do something like the following:

$('YourItemToClone').clone().attr('id','MyNewClonedId'); // change the id to class to put in new classes