【フォーム】追加ボタンを押して関連した入力欄2つを同時に増やしていく方法

はじめに

今回以下のようなフォームは作ったので、備忘録として残しておきます。

HTML部分

create.brade.php

<label>{{ __('材料') }}
      <a onclick=add() class="btn btn-sm btn-light">+追加</a>
      <div id="input_plural">
          <div class="d-flex">
              <input type="text" class="form-control mb-1" name="ing-name-1">
              <input type="text" class="form-control mb-1" name="ing-size-1">
              <input type="button" value="削除" onclick="del(this)">
          </div>
      </div>
</label>

javaScript部分

main.js

let inputPlural = document.getElementById('input_plural');
var count = 2;

function add() {
    let div = document.createElement('DIV');
    div.classList.add('d-flex');

    var input = document.createElement('INPUT');
    input.classList.add('form-control');
    input.setAttribute('name', 'ing-name-'+count);
    div.appendChild(input);

    var input = document.createElement('INPUT');
    input.classList.add('form-control');
    input.setAttribute('name', 'ing-size-'+count);
    div.appendChild(input);

    var input = document.createElement('INPUT');
    input.setAttribute('type', 'button');
    input.setAttribute('value', '削除');
    input.setAttribute('onclick', 'del(this)');
    div.appendChild(input);

    inputPlural.appendChild(div);
    count++;
}

function del(o) {
    o.parentNode.remove();
}

おわりに

bootstrapを使ってちょっぴり整えているので、その点はご了承ください。