Looping throught current select

Looping throught current select

  1. $("select[id^='ticket_types_']").each(function () {           
  2.             var selectName = this.name;
  3.             var selectId = this.id;
  4.             var buttons;   
  5.        
  6.             $("select[id=selectId] option").each(function () {
  7.                 alert("aa");
  8.                 buttons += "<input type='button' value='" + this.value + "'/>";                         
  9.             });
  10.             alert(buttons);
  11.             $("select[id=selectId]").replaceWith(buttons);
  12.             // add a hidden element with the same name as the select
  13.             var hidden = $('<input type="hidden" name="'+selectName+'">');
  14.             hidden.val($("select[id=this.id]").val());
  15.             hidden.insertAfter($("select[id^='ticket_types_']"));
  16.             $("select[id=this.id] option").unwrap().each(function() {
  17.                 var btn = $('<div class="btn">'+$(this).text()+'</div>');
  18.                 if($(this).is(':checked')) btn.addClass('on');
  19.                 $(this).replaceWith(btn);
  20.             });
  21.         });


I am trying to change the option in a select to buttons. There is more than one select on the page but tehy all have an id starting with ticket_types_

My problem is that it isn't going into

  1.             $("select[id=selectId] option").each(function () {
  2.                 alert("aa");
  3.                 buttons += "<input type='button' value='" + this.value + "'/>";                         
  4.             });

How do I get it to pick up the options for the current Select Id. selectId has the correct Id value


Thanks