title: jQuery will not update textarea
body: <p>I have an HTML textarea defined in index.html defined as follows:</p>
  
  <pre><code>&lt;textarea id="myTextArea" rows="12" readonly="7" class="form-control"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>I have a JavaScript file named <code>shared.js</code>. Right now, <code>shared.js</code> only has the following:</p>
  
  <pre><code>function appendToTextArea(id, text, stayOnCurrentLine) {
      var current = $(id).val();
  
      var newText = current + ' ' + text;
      if (!stayOnCurrentLine) {
          newStatus += '\n';          
      }
      $(id).val(newText);
  
      console.log($(id).val());   
  }
  </code></pre>
  
  <p>Index.html is successfully referencing shared.js. It even calls <code>appendToTextArea</code> just fine. I'm calling the code from a function in index.html called myButtonClick.</p>
  
  <pre><code>function myButtonClick() {
      appendToTextArea('#myTextArea', 'Hello', false);
      appendToTextArea('#myTextArea', 'How', false);
      appendToTextArea('#myTextArea', 'are', false);
      appendToTextArea('#myTextArea', 'you', false);
  }
  </code></pre>
  
  <p>When the above is called, the text of <code>myTextArea</code> is never updated. However, in the console, I see no errors. In addition, I can see the text exactly how I would expect it. What am I doing wrong?</p>