入力した数値に応じて編集ボックスを増やす方法が分からない

Question

私は、文章を確認し、その文章で気づいたルールなどを入力しデータベースに
保存するというものを作成しています。
現在、考えているのが文章のルールは1つとは限らないので、「ルール数」を入力し
その数に応じて「ルール」「比較結果」の編集ボックスを増やし入力してデータベースに保存できるようにしたい。
初心者のため、教えて頂ければ幸いです。宜しくお願い致します。

Answer 1

やっつけ

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#num').addEventListener('change',e=>{
    var num=parseInt(e.target.value);
    var rules;
    var c=0;
    while(num!==(rules=document.querySelectorAll('.rule')).length){
      if(c++>10)break;
      if(num<rules.length) rules[0].parentNode.removeChild(rules[rules.length-1]);
      if(num>rules.length) rules[0].parentNode.append(rules[0].cloneNode(true));
    }
  });
});
</script>
<div>ルール数:<input type="number" id="num" min="1" max="10" value="1"></div>
<div class="rule">
ルール:<input type="text" name="r[]" required><br>
比較結果:<input type="text" name="h[]" required><br>
</div>