Remove lists falling after selected list - php

Question

I am stuck on a problem where I want to remove all the list that fall after selected list.
I have created JS Fiddle here but it doesn't work. For example, if I select item from first drop-down then next two should removed, or if I select from second drop-down then third should be removed.
HTML
<div id='levels'>
<select id="level" class="parent" name="data[level][]">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="level" class="parent" name="data[level][]">
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="level" class="parent" name="data[level][]">
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
Javascript
$("#levels").on('change', function() {
$(this).nextAll().remove();
});​
I want to achieve this without assigning different class names or div names to each list.
Cakephp Code
Master File
<script type="text/javascript">
$(document).ready(function() {
$("select").on('change', function() {
$(this).nextAll('select').remove();
$("<div>").load('/dashboard/details/show_levels',function() {
$("#levels").append($(this).html());
});
})
<div id=levels>
<?php echo $form->input('level',array('options'=>$level,'type'=>'select','scroabble'=>true,'multiple'=>true, 'class'=>'parent')); ?>
</div>
});
show_levels
<?php
$abc=array('a','b','c','d');
echo $form->input('level',array('options'=>$abc,'type'=>'select','scroabble'=>true,'multiple'=>true, 'class'=>'parent')); ?>
Update:
Follwing solution worked for me
Replaced
$(this).nextAll('select').remove();
with
$(this).parents().nextUntil().remove();
Not sure how it worked, and whats the difference between two.

Answer 1

try this
$("select").on('change', function() {
$(this).nextAll('select').remove();
});​
fiddle

Answer 2

I'm not sure you want to remove them, as you said "hide", but to use change for your scenario, you can use something like:
$(document).ready(function () {
$("#levels").on("change", ".parent", function () {
$(this).nextAll().hide();
});
});
By the way, your <select> elements need to have unique id attributes, not all have "level".
Something that makes more sense to me, is something like this:
http://jsfiddle.net/HRh2d/

Answer 3

Follwing solution worked for me
Replaced
$(this).nextAll('select').remove();
with
$(this).parents().nextUntil().remove();
Not sure how it worked, and whats the difference between two.

Answer 4

Try .siblings() instead of nextAll
Also your selects should have unique IDs