jQuery SELECT input change option selected when clicking button up or down

[BAGHDADI]

\[code\]<select id="edit-attributes-1"> <option value="http://stackoverflow.com/questions/12822022/44" selected="selected">0</option> <option value="http://stackoverflow.com/questions/12822022/35">1</option> <option value="http://stackoverflow.com/questions/12822022/36">2</option> <option value="http://stackoverflow.com/questions/12822022/37">3</option></select><select id="edit-attributes-2"> <option value="http://stackoverflow.com/questions/12822022/44" selected="selected">0</option> <option value="http://stackoverflow.com/questions/12822022/35">1</option> <option value="http://stackoverflow.com/questions/12822022/36">2</option> <option value="http://stackoverflow.com/questions/12822022/37">3</option></select><select id="edit-attributes-3"> <option value="http://stackoverflow.com/questions/12822022/44" selected="selected">0</option> <option value="http://stackoverflow.com/questions/12822022/35">1</option> <option value="http://stackoverflow.com/questions/12822022/36">2</option> <option value="http://stackoverflow.com/questions/12822022/37">3</option></select><select id="edit-attributes-4"> <option value="http://stackoverflow.com/questions/12822022/44" selected="selected">0</option> <option value="http://stackoverflow.com/questions/12822022/35">1</option> <option value="http://stackoverflow.com/questions/12822022/36">2</option> <option value="http://stackoverflow.com/questions/12822022/37">3</option></select> <select id="edit-attributes-9" name="attributes[9]" class="form-select"> <option value="http://stackoverflow.com/questions/12822022/44" selected="selected">0</option> <option value="http://stackoverflow.com/questions/12822022/35">1</option> <option value="http://stackoverflow.com/questions/12822022/36">2</option> <option value="http://stackoverflow.com/questions/12822022/37">3</option> </select> <select id="edit-attributes-11" name="attributes[11]" class="form-select"> <option value="http://stackoverflow.com/questions/12822022/45" selected="selected">0</option> <option value="http://stackoverflow.com/questions/12822022/39">1</option> <option value="http://stackoverflow.com/questions/12822022/41">2</option> </select>\[/code\]?\[code\]//This Code adds <span>+</span> and <span>-</span> with their attributes$('select[id^="edit-attributes-"][id!="edit-attributes-12"]').after(function() { var count = $(this).find('option').length; return '<span class="step stepup step-' + this.id + '" id="step-up-' + this.id.substring(16) + '">+</span><span class="step stepdown step-' + this.id + '" id="step-down-' + this.id.substring(16) + '">-</span>';});//This code detects reacts when + or - is clicked.$('span[id^="step-"]').click(function() { //Tokenized class name into array <span class="step stepup step-edit-attributes-1" id="step-up-1">+</span> var classList = $(this).attr('class').split(/\s+/); //Use for Option Index = 0 ofcourse var min = 0; //Use for Option Index Max = number of options in particular Select var max = $("#" + classList[2].substring(5) + " option").length; //Index of selected Option var selected = $("#" + classList[2].substring(5) + " option:selected").index(); //Value of Selected Option var value = http://stackoverflow.com/questions/12822022/$("#" + classList[2].substring(5) + " option:selected").val(); //since id is "step-up-ID" just want to get the UP or DOWN var op = this.id.split("-"); if (op[1] == "up") { // second token of op = up or down if (value < max) { value++; alert(selected + ":" + value + " : " + op[1]); //remove any selected option ??????//MY PROBLEM IS HERE WHEN I TRY TO REMOVE EXISTING SELECTED AND SELECT A NEW OPTION AFTER THE SELECTED ONE** $("#" + classList[2].substring(5) + " option:selected").removeAttr("selected"); //assign new selected option ??????? $("#" + classList[2].substring(5) + " option").selectedIndex=value; } } if (op[1] == "down") { if (value > min) { value--; alert(selected + ":" + value + " : " + op[1]);//MY PROBLEM IS HERE WHEN I TRY TO REMOVE EXISTING SELECTED AND SELECT A NEW OPTION BEFORE THE SELECTED ONE** $("#" + classList[2].substring(5) + " option:selected").removeAttr("selected"); $("#" + classList[2].substring(5) + " option").selectedIndex=value; } }});?\[/code\]My goal is here when I click (\[code\]-\[/code\]) it will change selected 1 step above, then (\[code\]+\[/code\]) select new option one stop below. Can someone help out and maybe optimized this code. I've been trying to swim on this for hours already.