title: How to split one text area into two textareas?
body: <p>I have concatenated two text-area value into one text-area value. Now I want split the text-area into it's old two text-area when I click on revert button. Html view image and code given below:
  <a href="https://i.stack.imgur.com/Kvuu2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kvuu2.png" alt="HTML View"></a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;h3 class="text-center text-primary"&gt;TextArea Concatenate and Revert&lt;/h3&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-5"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
            &lt;textarea rows="4" cols="50" id="text_area_1"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
            &lt;textarea rows="4" cols="50" id="text_area_2"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
        &lt;/div&gt;
          &lt;button type="button" class="btn btn-success" onclick="concatenate()"&gt;Concatenate&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="col-md-5"&gt;
        &lt;textarea rows="8" cols="100" id="text_area_3"&gt;&lt;/textarea&gt;
        &lt;input type="submit" class="btn btn-warning" value="Revert"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>&lt;script&gt;
    function concatenate(){
      document.getElementById("text_area_3").value =
      document.getElementById("text_area_1").value + " " +
      document.getElementById("text_area_2").value;
      }
  &lt;/script&gt;
  </code></pre>