javascript 入力フォーム　初期入力数と上限数について

ネットのソースを参考に入力フォームの上限数(10まで)と、初期の入力フォームを2つ設けたいです。　どのように記入したらいいのかご教示いただけないでしょうか。
よろしくお願いいたします。

js
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2<script type="text/javascript">
3$(document).on("click", ".add", function() {
4    $(this).parent().clone(true).insertAfter($(this).parent());
5});
6$(document).on("click", ".del", function() {
7    var target = $(this).parent();
8    if (target.parent().children().length > 1) {
9        target.remove();
10    }
11});
12</script>

html
1<div id="input_pluralBox">
2    <div id="input_plural">
3        <input type="text" class="form-control" placeholder="選択肢を入力">
4        <input type="button" value="＋" class="add pluralBtn">
5        <input type="button" value="－" class="del pluralBtn">
6    </div>
7    </div>

css
1#input_plural {
2    margin: 10px 0;
3}
4 
5#input_plural input.form-control {
6    display: inline-block;
7    width: 65%;
8    height: 34px;
9    padding: 6px 12px;
10    font-size: 14px;
11    color: #555;
12}
13 
14#input_plural input.pluralBtn {
15    width: 30px;
16    height: 30px;
17    border: 1px solid #ccc;
18    background: #fff;
19    border-radius: 5px;
20    padding: 0;
21    margin: 0;
22}
23

行動規範の内容に同意します

回答1件

ベストアンサー

こうでしょうか

JavaScirpt
1        $(function(){
2            $('.form-control').parent().clone(true).insertAfter($('.form-control').parent());
3        });
4        $(document).on("click", ".add", function() {
5            if( $('.form-control').length < 10){
6                $(this).parent().clone(true).insertAfter($(this).parent());
7            }          
8        });
9        $(document).on("click", ".del", function() {
10            var target = $(this).parent();
11            if (target.parent().children().length > 1) {
12                target.remove();
13            }
14        });