Hey there, newbie here... Still getting a grasp on jQuery, so I'm probably overthinking or extra- typing...
Anyway, I have 2 select boxes. I can populate SelectA with items from a database, move the items from selectA to selectB and back again by clicking "add" and "remove"... BASIC CODE (HTML): <div> <select multiple id="selectA"> <?php //populate with database information ?> </select> add >> </div> <div> <select multiple id="selectB"></select> << remove </div> (JQUERY): $(document).ready(function(){ $('#add').click(function() { return !$('#selectA option:selected').remove().appendTo('#selectB'); }); $('#remove').click(function() { return !$('#selectB option:selected').remove().appendTo('#selectA'); }); }); THE ABOVE SITUATION WORKS... What I want to do is generate a set of these "selects" for each category in my database. I can do that through php and the use of a counter.... I get "selectA_".$ctr, "selectB_".$ctr, add.$ctr, and remove.$ctr as I should (i.e. first set of generated boxes would have the elements: selectA_1, selectB_1, add1, and remove1). BUT I have to add the click functions in the document ready function to this unknown number of elements, so I'm trying my first jQuery each statement - without any luck.... HERE IT IS.... sorry if I butchered it... #input4 is the name of the form I have this scenario in... $("#input4").find("select").each(function(i){ var addButton = "#add"+i var selectA = "#selectA_"+i+ " option:selected"; var B = "#selectB_"+i; $("'"+addButton+"'").click(function() { return !$("'"+selectA+ "'").remove().appendTo("'"+B +"'"); }); var removeButton = "#remove"+i var selectB = "#selectB_"+i+ " option:selected"; var A = "#selectA_"+i; $("'"+removeButton+"'").click(function() { return !$("'"+selectB+ "'").remove().appendTo("'"+A +"'"); }); }); I'm a little lost at the moment and you could say overwhelmed. I just need a little bump in the right direction to regain my "get up and go." Thanks in advance.