title: Add items to a list using jquery
body: <p>I had a quick question that I can't figure out. I am working with this code:</p>
  
  <p><a href="http://jsfiddle.net/spadez/ZTuDJ/32/" rel="nofollow">http://jsfiddle.net/spadez/ZTuDJ/32/</a></p>
  
  <pre><code>// If JS enabled, disable main input
  $("#responsibilities").prop('disabled', true);
  // $("#responsibilities").addClass("hidden");
  
  // If JS enabled then add fields
  $("#resp").append('&lt;input placeholder="Add responsibility" id="resp_input" &gt;&lt;/input&gt;&lt;input type="button" value="Add" id="add"&gt; ');
  
  // Add items to input field
  var eachline='';
  $("#add").click(function(){
      var lines = $('#resp_input').val().split('\n');
      var lines2 = $('#responsibilities').val().split('\n');
      if(lines2.length&gt;10)return false;
      for(var i = 0;i &lt; lines.length;i++){
          if(lines[i]!='' &amp;&amp; i+lines2.length&lt;11){
          eachline += lines[i] + '\n';
          }    
      }
  
          $('#responsibilities').text($("&lt;div&gt;" + eachline + "&lt;/div&gt;").text() );
  
      $('#resp_input').val('');
  });  
  </code></pre>
  
  <p>The idea is that you type something in the responsibility field and it gets inserted into a text area. What I also want to do is that when an item is inserted into the text area it also prints it out above it in a list format like this:</p>
  
  <p><code>&lt;li&gt;inserted item 1&lt;/li&gt; &lt;li&gt;inserted item 2&lt;/li&gt;</code></p>
  
  <p>I'm really new to javascript but this was my best stab at it based on information found online:</p>
  
  <pre><code>$("#resp").append('&lt;li&gt; +eachline &lt;/li&gt; ')   
  </code></pre>