Get the first empty select box recursively
<p>I have multiple <code>select</code> boxes in my document and some of them are load with page load and some of them created dynamically.  for example:</p>

<pre><code>&lt;select&gt;
    &lt;option&gt;select one&lt;/option&gt;
&lt;/select&gt;

&lt;select&gt;&lt;/select&gt;

&lt;select&gt;
    &lt;option&gt;select two&lt;/option&gt;
&lt;/select&gt;

&lt;select&gt;
    &lt;option&gt;select three&lt;/option&gt;
&lt;/select&gt;

&lt;select&gt;
&lt;/select&gt;
</code></pre>

<p>and more are created dynamically some of with  and some are empty.</p>

<p>I want to get the first empty <code>select</code> among them at page load and click on a button again want to get the first empty <code>select</code> box <strong><em>from the last one I get</em></strong> and continue this until no such <code>select</code> box further exists.</p>

<h3>NOTE <em>from the last one means</em>,</h3>

<p>If I get the first empty <code>select</code> box from first, then one <code>button</code> click search will start from that <code>select</code> box and continue until again get an empty <code>select</code> and so on.</p>
