title: How can I use val of "contenteditable 1" to update "contenteditable 2" with "keyup" event?
body: <p>I am struggling to achieve a solution to my problem:</p>
  
  <pre><code>&lt;div id="editable-content"&gt;
  &lt;span id="static1" class="non-editable"&gt;1-800-&lt;/span&gt;
  &lt;span class="edittext" id="block1" class="editable" placeholder="HELLO" contenteditable="true"autofocus&gt;&lt;/span&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div id="editable-content"&gt;
  &lt;span id="static2" class="non-editable"&gt;1-800-&lt;/span&gt;
  &lt;span class="edittext" id="block2" class="editable" placeholder="HELLO" contenteditable="true"autofocus&gt;&lt;/span&gt;
  </code></pre>
  
  <p></p>
  
  <p>I want to use the value of <strong>#block1</strong> to update <strong>#block2</strong> on a keyup event.
  Means: As soon as user types into <strong>#block1</strong> the same text simultaneously appears in <strong>#block2</strong>. </p>
  
  <p>This my JS so far but it doesn't do what i want it to do:</p>
  
  <pre><code>$( function() {
  function updateTextarea() {
      $( '#block2' ).val( $( '#block1' ).val());
  }
  $( '#block1' ).keyup( updateTextarea );
  </code></pre>
  
  <p>});</p>
  
  <p>What do I do wrong? Thank you so much in advance!!</p>