title: Saving multiple selected items on a cookie
body: <p>I'm trying to save user selected items on a cookie that way when they navigate on another page or refresh the page their preference is being saved. The selected item are also being clone on a different DOM element, i'm not sure if i'm doing it compliantly. At the moment, I can only save one item, I wanted to be able to save multiple items.</p>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>jQuery(document).ready(function() {
  
      var cookieName = 'franchiseSelected',
          cookieOptions = {expires: 7, path: '/'};
  
      $('input[name="' + $.cookie(cookieName) + '"]').attr("checked","checked").parent('li').clone().appendTo("#selected_items");
  
      $("input[type=checkbox]").click(function() {
          // $("#" + $.cookie(cookieName)).removeClass("selectedLanguage");
          $.cookie(cookieName, $(this).attr('value'), cookieOptions);
          $("#" + $.cookie(cookieName)).addClass("selectedLanguage");
          $(this).parent('li').clone().appendTo("#selected_items")
      });
  
  });    
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;h2&gt;Select Item&lt;/h2&gt;
  &lt;ul class="items"&gt;
  
      &lt;li&gt; &lt;input name="dog" value="dog" type="checkbox" /&gt; &lt;span&gt;Dog&lt;/span&gt; &lt;/li&gt;   
      &lt;li&gt; &lt;input name="cat" value="cat" type="checkbox" /&gt; &lt;span&gt;Cat&lt;/span&gt; &lt;/li&gt;   
      &lt;li&gt; &lt;input name="bird" value="bird" type="checkbox" /&gt; &lt;span&gt;Bird&lt;/span&gt; &lt;/li&gt;   
      &lt;li&gt; &lt;input name="donkey" value="donkey" type="checkbox" /&gt; &lt;span&gt;Donkey&lt;/span&gt; &lt;/li&gt;   
  
  &lt;/ul&gt;
  
  &lt;br&gt;
  &lt;h2&gt;Selected Items&lt;/h2&gt;
  &lt;ul id="selected_items"&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>See my fiddle here: <a href="http://jsfiddle.net/Eh22C/" rel="nofollow">http://jsfiddle.net/Eh22C/</a></p>