title: How to change all paragraph text colors and size dynamically onclick within a <div>?
body: <p><i>The following fiddle allows text to be pasted into a <code>&lt;textarea&gt;</code> and generated into paragraphs on button click. </i></p>
  
  <p>Is it possible, within the following code below, to create two dropdown lists <code>&lt;select&gt;&lt;/select&gt;</code>, one that changes the color of the paragraphs <code>&lt;p&gt;</code> to any color the user selects on click and the other to change the size of the text dynamically?</p>
  
  <p>Attached is the <a href="https://jsfiddle.net/zdCyq/15/" rel="nofollow">Fiddle</a>. It would be extremely helpful if the fiddle could please be updated, as I am still new to coding.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
  &lt;div id="text_land" style="border:1px solid #ccc; padding:25px; margin-bottom:30px;"&gt;xzxz&lt;/div&gt;
  &lt;textarea style="width:95%;"&gt;&lt;/textarea&gt;
  &lt;button&gt;Go&lt;/button&gt;
  </code></pre>
  
  <p></p>
  
  <p>Javascript:</p>
  
  <pre><code>$(function () {
    $('button').on('click', function () {
      var theText = $('textarea').val();
      var i = 200;
      while (theText.length &gt; 200) {
          console.log('looping');
          while (theText.charAt(i) !== '.') {
              i++;   
          }
  
          console.log(i);
          $("#text_land").append("&lt;p&gt;" + theText.substring(0, i+1) + "&lt;/p&gt;");
          theText = theText.substring(i+1);
          i = 200;
      }
  
      $('#text_land').append("&lt;p&gt;" + theText + "&lt;/p&gt;");
    })
  
  })
  </code></pre>
  
  <p>Thank You!</p>