jQuery 2 Editable Selectboxes - only one is working
<p>I have a form that is utilizing <a href="http://coffeescripter.com/code/editable-select/" rel="nofollow">this jQuery Editable-Select Plugin</a>. I have 2 select boxes (as you can see in the image below). They are both utilizing the classname <code>editable-select</code> and when I execute the JS - only one of them seems to be affected by the call. When I display the results of <code>editableSelect(...)</code> both select items are returned, but one is visibly untouched by the plugin. This select is not being populated by ajax, and is available to the DOM right away.</p>

<p>I've pulled the basic code out and put it into JSFiddle, and it works just fine, so I am not under the impression that there is a problem with the plugin or anything... I'm sure I'm overlooking something.</p>

<p>If I remove the class from working select box, the first one still does not work, so it's got to be something with the select box - but I really cant fingure out what.. The code for the <code>field1</code> select is copied and pasted right from the page. looks OK to me.</p>

<p>Where should I be looking for an error - I've been trying to debug this for a few hours now and everything looks legit. No errors in console/firebug. Please help :)</p>

<p><strong>JS</strong></p>

<pre><code>theSubjectBox = $('.editable-select').editableSelect({
    bg_iframe: true,
    onSelect: function(list_item) {
        alert('List item text: '+ list_item.text() + ' Input value: '+ this.text.val());
    },
    case_sensitive: false,
    items_then_scroll: 10 
});
console.log(theSubjectBox);
</code></pre>

<p>I have also tried</p>

<pre><code>theSubjectBox = $('#field1').editableSelect({...});
</code></pre>

<p><strong>Console Output</strong></p>

<blockquote>
<pre><code>[select#field1.editable-select, select#insertQM_hidden_select.editable-select]    
0       select#field1.editable-select
1       select#insertQM_hidden_select.editable-select
//The first item is clearly not touched by the plugin. Why!? :)
</code></pre>
</blockquote>

<p><strong>HTML</strong></p>

<pre><code>&lt;!--Not Working--&gt;
&lt;select style="width:200px;" name="field1" id="field1" class="editable-select"&gt;
    &lt;option value=''&gt;&lt;/option&gt;
    &lt;option value="Answer Needed"&gt;Answer Needed&lt;/option&gt;
    &lt;option value="Appointment Needed"&gt;Appointment Needed&lt;/option&gt;
    &lt;option value="BULLETIN"&gt;BULLETIN&lt;/option&gt;
    &lt;option value="Catalog/Literature"&gt;Catalog/Literature&lt;/option&gt;
    &lt;option value="Comment(s)"&gt;Comment(s)&lt;/option&gt;
    &lt;option value="Company Policy"&gt;Company Policy&lt;/option&gt;
    &lt;option value="F.Y.I."&gt;F.Y.I.&lt;/option&gt;
    &lt;option value="IMPORTANT"&gt;IMPORTANT&lt;/option&gt;
    &lt;option value="Information Please"&gt;Information Please&lt;/option&gt;
    &lt;option value="Meeting Information"&gt;Meeting Information&lt;/option&gt;
    &lt;option value="Need Your Help"&gt;Need Your Help&lt;/option&gt;
    &lt;option value="Needs Visit"&gt;Needs Visit&lt;/option&gt;
    &lt;option value="Personal"&gt;Personal&lt;/option&gt;
    &lt;option value="Personnel Change"&gt;Personnel Change&lt;/option&gt;
    &lt;option value="Question(s)"&gt;Question(s)&lt;/option&gt;
    &lt;option value="Quotation Needed"&gt;Quotation Needed&lt;/option&gt;
    &lt;option value="Reminder"&gt;Reminder&lt;/option&gt;
    &lt;option value="Thank You"&gt;Thank You&lt;/option&gt;
    &lt;option value="Trade Show"&gt;Trade Show&lt;/option&gt;
&lt;/select&gt;

&lt;!--Working Fine--&gt;  
&lt;select style="width:630px;" id="insertQM" name="insertQM" class="editable-select"&gt;
    &lt;option value=""&gt;Insert Quick Message&lt;/option&gt;
    &lt;option value="Can I see you in my office?"&gt;Can I see you in my office?&lt;/option&gt;
    &lt;option value="I'll take care of it right away."&gt;I'll take care of it right away.&lt;/option&gt;
    &lt;option value="I'm going to lunch now!"&gt;I'm going to lunch now!&lt;/option&gt;
    &lt;option value="MUST CALL IMMEDIATELY!"&gt;MUST CALL IMMEDIATELY!&lt;/option&gt;
    &lt;option value="No problémo"&gt;No problémo&lt;/option&gt;
    &lt;option value="Not yet"&gt;Not yet&lt;/option&gt;
    &lt;option value="Remind me later about that."&gt;Remind me later about that.&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p><img src="http://i.stack.imgur.com/x8jrB.jpg" alt="screenshot"></p>
