Change option on button click
<p>I am trying to write a userscript that will add buttons underneath a dropdown and change the value based on what button is clicked.  There are 3 separate dropdowns given here:</p>

<pre><code>&lt;fieldset&gt;
&lt;div style="float: left;"&gt;
&lt;div&gt;&lt;label&gt;Number of big seeds&lt;/label&gt; &lt;select class="form-control" name="big"&gt; &lt;optgroup label="big"&gt;&lt;option value="0"&gt;0&lt;/option&gt;&lt;option value="1"&gt;1&lt;/option&gt;&lt;option value="2"&gt;2&lt;/option&gt;&lt;option value="3"&gt;3&lt;/option&gt;&lt;option value="4"&gt;4&lt;/option&gt;&lt;option value="5"&gt;5&lt;/option&gt;&lt;/optgroup&gt; &lt;/select&gt;&lt;/div&gt;
</code></pre>

<p>&nbsp;</p>

<pre><code>&lt;div&gt;&lt;label&gt;Number of small seeds&lt;/label&gt; &lt;select class="form-control" name="small"&gt;&lt;optgroup label="small"&gt;&lt;option value="0"&gt;0&lt;/option&gt;&lt;option value="1"&gt;1&lt;/option&gt;&lt;option value="2"&gt;2&lt;/option&gt;&lt;option value="3"&gt;3&lt;/option&gt;&lt;option value="4"&gt;4&lt;/option&gt;&lt;option value="5"&gt;5&lt;/option&gt;&lt;/optgroup&gt; &lt;/select&gt;&lt;/div&gt;
</code></pre>

<p>&nbsp;</p>

<pre><code>&lt;div&gt;&lt;label&gt;Number of tiny seeds&lt;/label&gt; &lt;select class="form-control" name="tiny"&gt;&lt;optgroup label="tiny"&gt;&lt;option value="0"&gt;0&lt;/option&gt;&lt;option value="1"&gt;1&lt;/option&gt;&lt;option value="2"&gt;2&lt;/option&gt;&lt;option value="3"&gt;3&lt;/option&gt;&lt;option value="4"&gt;4&lt;/option&gt;&lt;option value="5"&gt;5&lt;/option&gt; &lt;/optgroup&gt; &lt;/select&gt;&lt;/div&gt;
</code></pre>

<p>&nbsp;</p>

<p></p>

<p>And here is my failed attempt at a userscript:</p>

<pre><code>$(document).ready(function() {

    //Variables for buttons
    var $0 = $('&lt;button type="button" class="0" id="0"&gt;0&lt;/button&gt;');
    var $1 = $('&lt;button type="button" class="0" id="1"&gt;1&lt;/button&gt;');
    var $2 = $('&lt;button type="button" class="0" id="2"&gt;2&lt;/button&gt;');
    var $3 = $('&lt;button type="button" class="0" id="3"&gt;3&lt;/button&gt;');
    var $4 = $('&lt;button type="button" class="0" id="4"&gt;4&lt;/button&gt;');
    var $5 = $('&lt;button type="button" class="0" id="5"&gt;5&lt;/button&gt;');

    var $6 = $('&lt;button type="button" class="1" id="0"&gt;0&lt;/button&gt;');
    var $7 = $('&lt;button type="button" class="1" id="1"&gt;1&lt;/button&gt;');
    var $8 = $('&lt;button type="button" class="1" id="2"&gt;2&lt;/button&gt;');
    var $9 = $('&lt;button type="button" class="1" id="3"&gt;3&lt;/button&gt;');
    var $10 = $('&lt;button type="button" class="1" id="4"&gt;4&lt;/button&gt;');
    var $11 = $('&lt;button type="button" class="1" id="5"&gt;5&lt;/button&gt;');

    var $12 = $('&lt;button type="button" class="2" id="0"&gt;0&lt;/button&gt;');
    var $13 = $('&lt;button type="button" class="2" id="1"&gt;1&lt;/button&gt;');
    var $14 = $('&lt;button type="button" class="2" id="2"&gt;2&lt;/button&gt;');
    var $15 = $('&lt;button type="button" class="2" id="3"&gt;3&lt;/button&gt;');
    var $16 = $('&lt;button type="button" class="2" id="4"&gt;4&lt;/button&gt;');
    var $17 = $('&lt;button type="button" class="2" id="5"&gt;5&lt;/button&gt;');


    //Add buttons
    $('.form-control').eq(0).after($0,$1,$2,$3,$4,$5);
    $('.form-control').eq(1).after($6,$7,$8,$9,$10,$11);
    $('.form-control').eq(2).after($12,$13,$14,$15,$16,$17);

});

//Click event
$(":button").click(function(){
     var thisClass = parseInt($(this).attr('class'));
     var thisID = parseInt($(this).attr('id'));

     $('.form-control').eq(thisClass).val(thisID);
});
</code></pre>

<p>Can someone tell me where I'm going wrong?  </p>