Make select box unique when using jcf modifyer
<p>I got this site designed already by front end designers. All select boxes are restyled when the page run in a browser. The problem is I want to show the previously selected value but I dont know how to do that if I cant assign a unique id to the modified select. Here is the modified drop down html:</p>

<pre><code>&lt;div unselectable="on" style="-webkit-user-select: none; -webkit-tap-highlight-color:
rgba(255, 255, 255, 0); width: 66px; " class=" select-area select-modify_select  
select-focus "&gt;
 &lt;span class="left"&gt;&lt;/span&gt;
  &lt;span class="center"&gt;B.N.S.&lt;/span&gt;
  &lt;a class="select-opener"&gt;&lt;/a&gt;
&lt;/div&gt;

&lt;select name="ach_bank" id="ach_bank" class="modify_select jcf-hidden" 
style="-webkit-tap-highlight-color: rgba(255, 255, 255, 0); "&gt;

                    &lt;option value=""&gt;Select...&lt;/option&gt;
                    &lt;option value="B.N.S."&gt;B.N.S.&lt;/option&gt;                
                    &lt;option value="F.G.B."&gt;F.G.B.&lt;/option&gt;                
                    &lt;option value="N.C.B."&gt;N.C.B.&lt;/option&gt;                
                    &lt;option value="R.B.C."&gt;R.B.C.&lt;/option&gt;                
&lt;/select&gt;
</code></pre>

<p>As you can see the regular select box is hidden and a modified drop down is created. The code that modified the select box is here: </p>

<pre><code>// custom select module
jcf.addModule({
name:'select',
selector:'select',
defaultOptions: {
    handleDropPosition: true,
    wrapperClass:'select-area',
    focusClass:'select-focus',
    dropActiveClass:'select-active',
    selectedClass:'item-selected',
    disabledClass:'select-disabled',
    valueSelector:'span.center',
    optGroupClass:'optgroup',
    openerSelector:'a.select-opener',
    selectStructure:'&lt;span class="left"&gt;&lt;/span&gt;&lt;span class="center"&gt;&lt;/span&gt;
            &lt;a  class="select-opener"&gt;&lt;/a&gt;',
    selectPrefixClass:'select-',
    dropMaxHeight: 200,
    dropFlippedClass: 'select-options-flipped',
    dropHiddenClass:'options-hidden',
    dropScrollableClass:'options-overflow',
    dropClass:'select-options',
    dropClassPrefix:'drop-',
    dropStructure:'&lt;div class="drop-holder"&gt;&lt;div class="drop-list"&gt;
            &lt;/div&gt;&lt;/div&gt;',
    dropSelector:'div.drop-list'
},
</code></pre>

<p>I however do not know how to modify the script to create a unique id for each created select. </p>

<p>I kow that the modification would fall in this line:</p>

<pre><code>selectStructure:'&lt;span class="left"&gt;&lt;/span&gt;&lt;span class="center" **id="someid"**&gt;&lt;/span&gt;
            &lt;a  class="select-opener"&gt;&lt;/a&gt;',
</code></pre>

<p>If i place an id in the code, then all the modified select have the same id. Is there a way to fix this?</p>
