title: jQuery how to mapping array with radio buttons value
body: <p>I'm trying to write a shopping list function just for fun, if user didn't click any radio buttons they'll get a fully log list from server, I finished that part but I'm stuck right now don't know how to show the list mapping with the radio buttons value that user click?
  For example, if user click <code>guava</code> then the log will only show the message about guava:</p>
  
  <pre><code>Jan 2 22:00:10   guava for 1 
  </code></pre>
  
  <p>if user click <code>guava and strawberry</code> then the log will show both guava and strawberry's message like this:</p>
  
  <pre><code>Jan 1 00:00:10   strawberry for 2
  Jan 2 22:00:10   guava for 1
  Jan 3 03:10:16   strawberry for 22 
  </code></pre>
  
  <p>My code is here:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var cart = "|grocery|Jan  1 00:00:10 |shopping| [list]|strawberry| for 2 |grocery|Jan  1 00:20:23 |shopping| [list]|apple| for 4 |grocery|Jan  2 00:10:10 |shopping| [list]|apple| for 5 |grocery|Jan  2 00:20:15 |shopping| [list]|banana| for 3 |grocery|Jan  2 10:00:00 |shopping| [list]|apple| for 10 |grocery|Jan  2 22:00:10 |shopping| [list]|guava| for 1 |grocery|Jan  3 01:09:08 |shopping| [list]|watermelon| for 7 |grocery|Jan  3 03:10:16 |shopping| [list]|strawberry| for 22";
  
  $("#button").click(function(){
   var tidyList = cart.split("|grocery|");
    
    for(var i=0; i&lt;tidyList.length; i++){
     var list = tidyList[i].split("|");
      var tmp = list[0] + "\r&amp;nbsp;&amp;nbsp;" + list[3] + list[4] + "\r&lt;br/&gt;";
          
      if(list.length &gt; 1 &amp;&amp; $("input:radio").is(":checked") == false){
       $("#showList").append(tmp);
      }
   }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table&gt;
  &lt;tr&gt;
  &lt;th&gt;Fruits for you&lt;/th&gt;
  &lt;td&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;input type="radio" value="apple" id="apple"&gt;
        &lt;label for="apple"&gt;apple&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;input type="radio" value="banana" id="banana"&gt;
        &lt;label for="apple"&gt;banana&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;input type="radio" value="watermelon" id="watermelon"&gt;
        &lt;label for="apple"&gt;watermelon&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;input type="radio" value="guava" id="guava"&gt;
        &lt;label for="apple"&gt;guava&lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;input type="radio" value="strawberry" id="strawberry"&gt;
        &lt;label for="apple"&gt;strawberry&lt;/label&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;input type="button" value="Shopping List" id="button"&gt;
  &lt;div id="showList"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>