ボタンをクリック後、フォームを挿入してさらにマルチ言語用にタブ切り替えを実装させたいのですが、うまく行きません。

なんとかしてクリック毎にidを振り当ててその要素にタブ切り替えのファンクションを振り当てたいです。

どんな些細な事でも構いませんのでどなたかご指摘を宜しくお願いいたします。

var totalField = 0;

function addField(type) {
  totalField++;
  if (type === 'free') {
    freeText();
  } else if (type === 'insideQuote') {
    insideQuote();
  } else if (type === 'clipsQuote') {
    clipsQuote();
  } else if (type === 'outsideLink') {
    outsideLink();
  }
}

function freeText() {
  var form_element = document.createElement("form");
  form_element.id = 'freeText_' + totalField;
  form_element.name = 'heading_' + totalField;
  form_element.class = 'col-xs-12';

  var form_tab = document.createElement("ul");
  form_tab.id = 'myTab_' + totalField;
  form_tab.setAttribute('class', 'nav nav-tabs');
  form_tab.setAttribute('data-role', 'tablist');
  form_tab.innerHTML = '<li class="active"><a href="#jpn">日本語</a></li><li><a href="#eng">English</a></li>';

  var tab_content = document.createElement("div");
  tab_content.id = 'myTabContent_' + totalField;
  tab_content.setAttribute('class', 'tab-content');

  var jp_panel = document.createElement("div");
  jp_panel.id = "jpn";
  jp_panel.setAttribute('class', 'tab-pane active');
  jp_panel.setAttribute('aria-labelledby', 'jpn');

  var heading = document.createElement("h4");
  heading.innerText = "見出しを入力";

  var headingTitle = document.createElement("input");
  headingTitle.type = "text";
  headingTitle.id = "headingTitle_" + totalField;
  headingTitle.name = "headingTitle";
  headingTitle.placeholder = "見出し";

  var subHeading = document.createElement("h5");
  subHeading.innerText = "自由文を入力";

  var textArea = document.createElement("textarea");
  textArea.id = "content_" + totalField;
  textArea.name = "content";
  textArea.setAttribute('rows', 5);
  textArea.setAttribute('cols', 80);
  textArea.placeholder = "内容 ";

  //インナーへ挿入
  jp_panel.appendChild(heading);
  jp_panel.appendChild(headingTitle);
  jp_panel.appendChild(subHeading);
  jp_panel.appendChild(textArea);

  var eng_panel = document.createElement("div");
  eng_panel.id = "eng";
  eng_panel.setAttribute('class', 'tab-pane');
  eng_panel.setAttribute('aria-labelledby', 'eng');

  var eng_heading = document.createElement("h4");
  eng_heading.innerText = "Heading";

  var eng_headingTitle = document.createElement("input");
  eng_headingTitle.type = "text";
  eng_headingTitle.id = "eng_headingTitle_" + totalField;
  eng_headingTitle.name = "eng_headingTitle";
  eng_headingTitle.placeholder = "Cool heading";

  var eng_subHeading = document.createElement("h5");
  eng_subHeading.innerText = "Description";

  var eng_textArea = document.createElement("textarea");
  eng_textArea.id = "content_" + totalField;
  eng_textArea.name = "content";
  eng_textArea.setAttribute('rows', 5);
  eng_textArea.setAttribute('cols', 80);
  eng_textArea.placeholder = "Some dope content goes here....";

  eng_panel.appendChild(eng_heading);
  eng_panel.appendChild(eng_headingTitle);
  eng_panel.appendChild(eng_subHeading);
  eng_panel.appendChild(eng_textArea);

  //インナーを挿入
  tab_content.appendChild(jp_panel);
  tab_content.appendChild(eng_panel);

  var child_object = document.getElementById('field');
  child_object.appendChild(form_element);
  form_element.appendChild(form_tab);
  form_element.appendChild(tab_content);
}

<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>

<div id="field" class="col-xs-12"></div>
<button class="btn btn-default" onclick="addField('free')">
  自由文
</button>