Remove all <select> elements after the one that has been selected

Question

I have a list of dynamically generated <selects>s in a form. I need to make it so that if the user decides go back to an earlier <select>, all <select> that come after it will be removed from the page.

My code below will console.log the correct <select> elements to be removed, but if I start removing them, then it stops working. I'm looping using a non-live list, so I'm confused about why it's not working as expected.

HTML:

<form action="#" method="post">
    <label for="select1">square 1:</label>
    <select name="1" id="select1"></select>
    <label for="select2">square 2:</label>
    <select name="2" id="select2"></select>
    <label for="select3">square 3:</select>
    <select name="3" id="select3"></select>
    ...
</form>

JS (select is the currently selected <select>):

    var form = document.getElementsByTagName('form')[0];
    var selects = form.getElementsByTagName('select');
    for (var i = 0; i < selects.length; i++) {
        if (selects[i].name > select.name) {
            var eleToRemove = selectsLive[selects[i].getAttribute('name') - 1];
            console.log(eleToRemove);
            form.removeChild(eleToRemove.previousSibling); // removes label
            form.removeChild(eleToRemove);
        }
    }

Answer 1

It works when it is written correctly

var sel= 2; // for example
var form = document.getElementsByTagName('form')[0];
var selects = form.getElementsByTagName('select');
for (var i = selects.length-1; i >= 0; i--) {
    if (+selects[i].name > sel) {
        var eleToRemove = selects[i];
        console.log(eleToRemove);
        form.removeChild(eleToRemove.previousElementSibling); // removes label
        form.removeChild(eleToRemove);
    }
}