place input text value in two divs with jquery
<p>I am using the autocomplete widget on my form which is basically providing a depart city text input field and a return text input field. </p>

<p>I would like to show in one div the Depart From, and Arrive At and in a second div the return information which would be the same. (i.e. Depart Toronto to Barrie and the Return, Barrie to Toronto).</p>

<p>My jQuery is working fine to display the information the first time but I can't get the information to show again reversed.</p>

<p>My form: (only displaying part)</p>

<pre><code>&lt;div class="ui-widget"&gt;
    &lt;p&gt;
        &lt;label for="tags"&gt;Depart From:&lt;/label&gt;
        &lt;input type="text" class="departCity" id="tags" size="30" /&gt;
    &lt;/p&gt;
&lt;/div&gt;
&lt;div class="ui-widget"&gt;
    &lt;p&gt;
        &lt;label for="tags2"&gt;To:&lt;/label&gt;
        &lt;input type="text" class="destination" id="tags2" size="30" /&gt;
    &lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>My code is:</p>

<pre><code>$(function() {
    $('input[type="text"]').blur(function() {
        $("#" + $(this).attr('id') + "_display").html($(this).val());
    });
});​
</code></pre>

<p>And html:</p>

<pre><code>&lt;div id="trip"&gt;
    &lt;p&gt;&lt;strong&gt;&lt;span id="tags_display"&gt;&lt;/span&gt; - &lt;span id="tags2_display"&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;div id="returnTrip"&gt;
    &lt;p&gt;&lt;strong&gt;&lt;span id="displayTags2"&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>As I said, the first part in the "trip" div displays fine but I would like to clone/duplicate it in the second.</p>

<p>I tried this and some other variations but can't get it to display a second time. My form data is not going anywhere, it will only be displayed.</p>

<pre><code>function open() {
    $('#displayTags2').html($('#tags2_display').clone());
}
open();​
</code></pre>

<p>Thanks in advance for any help.</p>
