How can I make clicking a link populate a value of an input element that appears before it?
<p>I have the following:</p>

<pre><code>&lt;div class="btn-group"&gt;
    &lt;input disabled="disabled" id="dialogType"&gt;
    &lt;button data-toggle="dropdown" class="dropdown-toggle"&gt;
    &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu" id="towns"&gt;
        &lt;li&gt;&lt;a data-value="0Z" href="#"&gt;A&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a data-value="10" href="#"&gt;B&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="btn-group"&gt;
    &lt;input disabled="disabled" id="dialogStatus"&gt;
    &lt;button data-toggle="dropdown" class="dropdown-toggle"&gt;
    &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu" id="places"&gt;
        &lt;li&gt;&lt;a data-value="22" href="#"&gt;C&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a data-value="33" href="#"&gt;D&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>In the past I used the following javascript to populate the #town label field when one of the links is clicked:</p>

<pre><code>$('#towns &gt; li &gt; a').click(function (e) {
    e.preventDefault();
    $('#town').text($(this).html())
 });
</code></pre>

<p>Now I would like to make this javascript work for any similar ul that's inside of a DIV with the class dropdown-menu.  </p>

<p>So what I would like is:</p>

<ul>
<li>When the user clicks on a link such as A then the first input element inside the btn-group is given the value of A and also a data-value of "0Z"</li>
<li>When the user clicks on a link such as D then the first input element inside that btn-group is given the value of D and also a data-value of "33"</li>
</ul>

<p>Can someone tell me how I could do this. I just need a more generic version of the function above.
. </p>
