get value from textarea and create a new textarea with the text

Question

Now i have a problem with the get value ~ I was doing a function which is when i click a button it will show up a modal and inside it have a textarea. once you write all the content inside, click ok button it will create a new textarea with the text you wrote. You can do it multiple time.i only know how to add a new textarea but i have no idea how to get the value.i have a hard time with this function~ hope anyone can help me. i am a newbie in this area. Sorry about my bad grammar.

**Html

$(document).ready(function(){
	
var counter=1;

$('.add').click(function() {
	
	
$('.block:last').before('<div class="block">'+
'<textarea></textarea>'+
'</div>');
	
counter++;
});


});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="block">
<button type="button" class="btn btn-default btn-lg start-new-post-button-setting" data-toggle="modal" data-target="#codetextarea">Add code textarea</button>
<div class="modal fade" id="codetextarea" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<textarea class=" textarea-setting" name="message" id="area"></textarea>
</div>
<div class="modal-footer">
<span class="add"><button type="button" class="btn btn-default" data-dismiss="modal">OK</button></span>
</div>
</div>
</div>
</div>
</div>

**

Answer 1

'<textarea>'+$("#area").val()+'</textarea>'+

This is how you get the value of the textarea. Replace your '<textarea></textarea>'+ with above

Answer 2

You need to get value from textarea using $('#area').val() and append with the html or generate dom elements using jQuery .

$(document).ready(function() {
  var counter = 1;
  $('.add').click(function() {
    $('.block:last').before(
      $('<div/>', {
        class: 'block',
        html: $('<textarea/>', {
          text: $('#area').val()
        })
      })
    );

    /* or by appending */
    // $('.block:last').before('<div class="block">' +
    //  '<textarea>' + $('#area').val() + '</textarea>' +
    //  '</div>');
    counter++;
  });
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="block">
  <button type="button" class="btn btn-default btn-lg start-new-post-button-setting" data-toggle="modal" data-target="#codetextarea">Add code textarea</button>
  <div class="modal fade" id="codetextarea" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <textarea class=" textarea-setting" name="message" id="area"></textarea>
        </div>
        <div class="modal-footer">
          <span class="add"><button type="button" class="btn btn-default" data-dismiss="modal">OK</button></span>
        </div>
      </div>
    </div>
  </div>
</div>