複数のテキストエリアの内容を特定のテキストエリアに出力させたい

下記コードにてテキストエリアを繰り返し追加します。
追加された各テキストエリアに入力した内容をボタンをクリックして特定のテキストエリアにまとめて取得させるにはどうすれば良いでしょうか。

◇条件があります。
ポイント１
・繰り返し追加されるのはテキストエリアだけでなく<button>など他の要素も含まれます。

ポイント２
繰り返し追加したテキストエリアは、リストタグ上で順番を入れ替えを可能とする予定です(今回質問には含みません)。そのため順番を入れ替えたらそのまま特定のテキストエリアに反映させたい。

◇ネットで解決しそうな手段として、クラスの取得からテキストエリアへの反映を試しましたがだめでした。
「var strInsert = document.getElementsByClassName("taF2");」

javascriputは初心者です。上記の手段にはこだわってません。どうかご教授よろしくお願いいたします。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>


<button id="add" class="butt">追加</button>
<button id="reset">リセット</button>

<table>
    <ul id="jquery-ui-sortable" class="foo"></ul>
</table>



<textarea id="output1" cols="40" rows="5" name="myTEXT" class="myTEXT1"></textarea><br>
<button onclick="insertString()">test dataを挿入</button>


//////////////以下テキストエリア追加＆自動保存

var initData  = [];
var listString = "";

  function initialize(){
    $.each(initData, function(key, value) {
      $(".foo").prepend('<li class="ui-state-default"><textarea id="taF2"></textarea><button class="delete">削除</button></li>');
    });
  }

  if (localStorage.getItem("foo")) {
    $(".foo").html(localStorage.getItem("foo"));
  } else {
    initialize();
  }

  $("#add").click(function() {
    $(".foo").prepend('<li class="ui-state-default"><textarea id="taF2"></textarea><button class="delete">削除</button></li>');
    localStorage.setItem("foo", $(".foo").html());
  });

  $(".foo").on("keyup", ":input", function(){
    $.each($("textarea"), function(key, input){
      $(input).text($(input).val());
    });
    localStorage.setItem("foo", $(".foo").html());
  });


  $(".foo").on("click", ".delete", function() {
    $(this).parent().remove();
    localStorage.setItem("foo", $(".foo").html());
  });

  $("#reset").click(function(){
    $(".foo").empty();
    initialize();
    localStorage.setItem("foo", $(".foo").html());
  });


////////////////////以下、特定のtextareaにまとめて移動させたく挑戦中した結果、追加された１つのテキストエリアしか反映しなかった

function insertString() {
//挿入する文字列
var strInsert = document.getElementById("taF2").value;
    
//現在のテキストエリアの文字列
var strOriginal = document.getElementById('output1').value;

//現在のカーソル位置
var posCursole = document.getElementById('output1').selectionStart;
//カーソル位置より左の文字列
var leftPart = strOriginal.substr(0, posCursole);
//カーソル位置より右の文字列
var rightPart = strOriginal.substr(posCursole, strOriginal.length);

//文字列を結合して、テキストエリアに出力
document.getElementById('output1').value = leftPart + strInsert + rightPart;
}

//◇ここに行き詰まりました。
//「var strInsert = document.getElementById("taF2").value;」を使って取得を試みたが、追加された１つのテキストエリアの内容しか反映されなかった
//「var strInsert = document.getElementsByClassName("taF2");」それならば同一要素の取得としてクラスにを試みたがだめでした。