jQueryでタブ切り替えされたフォーム複数要素を取得するには？

jQuery, Javascript初心者なので質問させて頂きます。
タブ切り替え要素のinput, textareaの要素を一度に取得して確定を押した後にappendに入力したいと思いますがうまくいきません。

他の記述方法やシンプルに書き換えることが可能でしたらご指導頂ければと思います。

function saveField(obj) {
  var thisId = obj.parentNode.parentNode.parentNode.id;
  var AAInputValue = $('div[thisId]').children('#AA').find('input').val();
  var AATextValue = $('div[thisId]').children('#AA').find('textarea').val();
  var BBInputValue = $('div[thisId]').children('#BB').find('input').val();
  var BBTextValue = $('div[thisId]').children('#BB').find('textarea').val();
  var CCInputValue = $('div[thisId]').children('#CC').find('input').val();
  var CCTextValue = $('div[thisId]').children('#CC').find('textarea').val();
  var DDInputValue = $('div[thisId]').children('#DD').find('input').val();
  var DDTextValue = $('div[thisId]').children('#DD').find('textarea').val();
  var EEInputValue = $('div[thisId]').children('#EE').find('input').val();
  var EETextValue = $('div[thisId]').children('#EE').find('textarea').val();

  var headingOutputAA = document.createElement('h3');
  headingOutput.innerText = AAInputValue;

  var contentOutputAA = document.createElement('p');
  contentOutput.innerText = AATextValue;

  var headingOutputBB = document.createElement('h3');
  headingOutput.innerText = BBInputValue;

  var contentOutputBB = document.createElement('p');
  contentOutput.innerText = BBTextValue;

  var headingOutputCC = document.createElement('h3');
  headingOutput.innerText = CCInputValue;

  var contentOutputCC = document.createElement('p');
  contentOutput.innerText = CCATextValue;

  var headingOutputDD = document.createElement('h3');
  headingOutput.innerText = DDInputValue;

  var contentOutputDD = document.createElement('p');
  contentOutput.innerText = DDTextValue;

  var headingOutputEE = document.createElement('h3');
  headingOutput.innerText = EEInputValue;

  var contentOutputEE = document.createElement('p');
  contentOutput.innerText = EETextValue;

  var outputOuter = document.createElement('div');
  outputOuter.appendChild(headingOutputAA);
  outputOuter.appendChild(contentOutputAA);
  outputOuter.appendChild(headingOutputBB);
  outputOuter.appendChild(contentOutputBB);
  outputOuter.appendChild(headingOutputCC);
  outputOuter.appendChild(contentOutputCC);
  outputOuter.appendChild(headingOutputDD);
  outputOuter.appendChild(contentOutputDD);
  outputOuter.appendChild(headingOutputEE);
  outputOuter.appendChild(contentOutputEE);

  var child_object = document.getElementById('field');
  child_object.appendChild(outputOuter);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<ul class="nav nav-pills" role="tablitst">
  <li class="active">
    <a href="#a" aria-controls="a" role="tab" data-toggle="tab">A</a>
  </li>
  <li>
    <a href="#b" aria-controls="b" role="tab" data-toggle="tab">B</a>
  </li>
  <li>
    <a href="#c" aria-controls="c" role="tab" data-toggle="tab">C</a>
  </li>
  <li>
    <a href="#d" aria-controls="d" role="tab" data-toggle="tab">D</a>
  </li>
  <li>
    <a href="#e" aria-controls="e" role="tab" data-toggle="tab">E</a>
  </li>
</ul>

<div class="tab-content" id="field">
  <div role="tabpanel" class="tab-pane active" id="a">
    <div id="AA">
      <div class="free-text">
        <h4>
          aaaa
        </h4>
        <input name="heading" type="text" rows="5" cols="80">
        <h5>
          bbbb
        </h5>
        <textarea name="content" id="" cols="80" rows="5"></textarea>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="b">
    <div id="BB">
      <!-- free text -->
      <div class="free-text">
        <h4>
          cccc
        </h4>
        <input name="heading" type="text" rows="5" cols="80">
        <h5>
          dddd
        </h5>
        <textarea name="content" id="" cols="80" rows="5"></textarea>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="c">
    <div id="CC">
      <div class="free-text">
        <h4>
          eeee
        </h4>
        <input name="heading" type="text" rows="5" cols="80">
        <h5>
          ffff
        </h5>
        <textarea name="content" id="" cols="80" rows="5"></textarea>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="d">
    <div id="DD">
      <div class="free-text">
        <h4>
          gggg
        </h4>
        <input name="heading" type="text" rows="5" cols="80">
        <h5>
         hhhh
        </h5>
        <textarea name="content" id="" cols="80" rows="5"></textarea>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="e">
    <div id="FF">
      <div class="free-text">
        <h4>
          iiii
        </h4>
        <input name="heading" type="text" rows="5" cols="80">
        <h5>
          jjjj
        </h5>
        <textarea name="content" id="" cols="80" rows="5"></textarea>
      </div>
    </div>
  </div>
  <ul class="list-inline">
    <li><a href="#">キャンセル</a>
    </li>
    <li><a href="#" onclick="saveField(this);">確定</a>
  </ul>
</div>