Simple jQuery: Adding multiple values to textboxes
<p>Using the following source:</p>

<pre><code>&lt;div id="addons"&gt;
    &lt;div class="addon"&gt; 
        &lt;span class="title"&gt;&lt;input type="checkbox" value="addon_1" name="Item 1 title"&gt;&lt;/span&gt;
        &lt;span class="cost"&gt;$&lt;em&gt;20&lt;/em&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="addon"&gt; 
        &lt;span class="title"&gt;&lt;input type="checkbox" value="addon_2" name="Item 2 title"&gt;&lt;/span&gt;
        &lt;span class="cost"&gt;$&lt;em&gt;45&lt;/em&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="hidden" id="summaries"&gt;
        &lt;input name="addons_titles" id="addons_titles" type="text" value=""&gt;&lt;!-- on checkbox click, add item titles --&gt;
        &lt;input name="addons_cost" id="addons_cost" type="text" value=""&gt;&lt;!-- on checkbox click, total item cost --&gt;
    &lt;/div&gt;
&lt;/div&gt;&lt;!-- end addons --&gt;
</code></pre>

<p>I'm trying to </p>

<ul>
<li>summarise the titles from "<strong>.addon .title input[name]</strong>" to <strong>input#addons_titles</strong> (each title separated by pipe characters - eg: "Item 1 title | Item 2 title")</li>
<li>and total item costs from "<strong>.addon .cost em</strong>" to <strong>input#addons_cost</strong> </li>
</ul>

<p>Any thoughts much appreciated - thanks!</p>
