javascript+bootstrapでの入力欄の追加（ラベル付きでの表示）

Question

前回bootstrapで作成した入力欄をjavascriptで追加作成するコードを作成し、入力欄は作成できる様になったのですが、次のステップとしてラベルも入力欄と同時に追加したいのですが、上手く表示ができません。具体的には以下の画像の様にラベルが表示されてしまいます。

HTML側で、form_area、label, inputarea, input等、複数の要素が入れ子になっているますが、それらの関係性を保ちながらappendChildする方法を教えてください。以下が希望している表示結果です。

現在のコードは以下の通りです

<div id="form_area" class="form-group">
<label for="input" class="col-sm-2 col-form-label"> <p>Steps</p></label>
<div id="inputarea" class="col-sm-11">
<input type="text" class="form-control" id="input" name="procedure">
</div>
</div>
<input type="button" class="btn btn-info" value="追加" onclick="addForm()">

function addForm() {
  var div = document.createElement('div');
  div.className = 'form-group row';

  var label = document.createElement('label');
  label.className = 'col-sm-2 col-form-label';
  label.id = 'labelID';
  label.innerHTML = 'Steps';
  

  var input_data = document.createElement('input');
  input_data.type = 'text';
  input_data.className ='form-control';
  input_data.name ='procedure';
  
  var parent = document.getElementById('inputarea');
  var outerParent = document.getElementById('form_area');
  
  
  outerParent.appendChild(label);
  parent.appendChild(input_data);

}

Answer 1

HTMLにも不備があるので、そこも訂正しつつ回答します。
問題点としては、labelは確かに<div id="form_area" class="form-group">の中に増やせているので、2行目、3行目と増やせているのですが、inputを1行目のdiv(id="inputarea")にまとめて入れてしまっているためです。
行を増やすときに、input要素を入れるdivも増やす必要がありますね。
（もっとも、今回の作りならばこのdivは必要ないのですが、、）

また、HTMLの修正点としては、下記のようなことがあります。
・要素のidは、1つのページ内に同じものが重複してはいけないことになっています。複数あるものにはidでなくclassを付けましょう
・Bootstrapの設計上、今回はform-groupクラスが付いたdivごと増やした方がよいです

上記修正して、このようになります。

<div id="form_area">
  <div class="form-group">
    <label for="input" class="col-sm-2 col-form-label"
      >Steps</label
    >
    <input
      type="text"
      class="form-control col-sm-11"
      name="procedure"
    />
  </div>
</div>
<input
  type="button"
  class="btn btn-info"
  value="追加"
  onclick="addForm()"
/>

function addForm() {
  var div = document.createElement("div");
  div.className = "form-group";

  var label = document.createElement("label");
  label.className = "col-sm-2 col-form-label";
  label.innerHTML = "Steps";
  label.for = "procedure";

  var input_data = document.createElement("input");
  input_data.type = "text";
  input_data.className = "form-control col-sm-11";
  input_data.name = "procedure";

  var outerParent = document.getElementById("form_area");

  div.appendChild(label);
  div.appendChild(input_data);
  outerParent.appendChild(div);
}

Comments

[sandalwalk]

回答ありがとうございます。動作しました。
ご指摘頂いた、HTMLの、特にform-groupクラスが付いたdivごと増やすために
<div id="form_area">
<div class="form-group">
と書く所が重要だと感じました。このHTMLで書いていないとjavascript側でどう頑張ってもダメだったと思います。