title: how could I append different values into an array?
body: <p>I'm trying to append city names by clicking in the &lt; li> elements and adding them up to the array but I'm stuck, this is what I've got so far:</p>
  
  <pre><code>&lt;div id='cities'&gt;pick cities: 
     &lt;div id='csffs'&gt;&lt;/div&gt;
     &lt;ul&gt;
         &lt;li&gt;San francisco&lt;/li&gt;
         &lt;li&gt;Palo Alto&lt;/li&gt;
         &lt;li&gt;San Diego&lt;/li&gt;
         &lt;li&gt;Los Angeles&lt;/li&gt;
         &lt;li&gt;Toledo&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>$('li').on('mouseup', function() {
          var city = $(this).text();
          var bunch_of_cities = ['New York','Cleveland','Port Clinton','Toledo'];
      if($.inArray(city,bunch_of_cities) &gt; -1){
      //if found, not added up to the array
          city = null;
      }else{
      // if not found, then add it up to the array
          bunch_of_cities.push(city);
      }
          $("#csffs").html(free_to.join());
  
  
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/jesus_39_34/y825ttL5/1/" rel="nofollow">Jsfiddle</a></p>
  
  <p>The problem I'm facing is that I need to be able to add more than 1 city and not as it happens with the demo I left above:</p>
  
  <p>i.e:</p>
  
  <pre><code>New York,Cleveland,Port Clinton,Toledo [Whichever city was clicked]
  </code></pre>
  
  <p>I want something like this:</p>
  
  <pre><code>New York,Cleveland,Port Clinton,Toledo,San francisco, Palo Alto,....so forth and so on
  </code></pre>
  
  <p>Feel free to change bits or give me a better way to do this and of course Thanks for your time!!!</p>
  
  <p>PD: I've been learning to code by my own so forgive the sloppy code of above</p>