Javascript 如何在jquery中动态添加表单元素？

我试图用一点javascript在rails中创建一个动态表单我遇到了一个问题我在使用pry时只得到一行输出显然这是因为自从我使用jQuery以来，我对每个字段输入都有相同的参数。clone，也许有人曾与类似的东西做过斗争，可以分享一些知识，如何使用javascript动态地将索引添加到此表单中的参数

@extends('Admin.master')

@section('content')

    <div class="p-5">
        <h3><i class="fas fa-cog ml-2"></i>Setting</h3><hr>
        <form action="{{ route('settings.update', $setting->id) }}" method="POST" >
            @csrf
            @method('PUT')
            <div id="showDynamic">

            </div>
        </form>
    </div>

@endsection

@section('script')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        $(document).ready(function(){
            let count = 1;
            $('.add').click(function(){
                count++;
                dynamic(count);
            });
            dynamic(count);
            function dynamic(number) {
                var html = '' +
                    '<div class="row">\n' +
                    '<div class="col-md-4">\n' +
                    '<input class="form-control" placeholder="Name">\n' +
                    '</div>\n' +
                    '<div class="col-md-4">\n' +
                    '<input class="form-control" placeholder="Link">\n' +
                    '</div>\n' +
                    '<div class="col-md-2">\n' +
                    '<a class="btn btn-primary" id="add">Add</a>\n' +
                    '<a class="btn btn-danger" id="delete">Delete</a>\n' +
                    '</div>\n' +
                    '</div>';
                $('#showDynamic').append(html);
            }
        });
    </script>
@endsection

@extends（'Admin.master'）
@节（“内容”）
设置

@csrf
@方法（'PUT'）
@端部
@节（“脚本”）
$（文档）.ready（函数（）{
让计数=1；
$（'.add'）。单击（函数（）{
计数++；
动态（计数）；
});
动态（计数）；
动态功能（数字）{
var html=''+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
'添加\n'+
'删除\n'+
“\n”+
'';
$（'#showDynamic'）.append（html）；
}
});
@端部

• 1stid必须是唯一的。。因此，将

  id=“add”

  和

  id=“delete”

  更改为类

  class=“btn btn primary add”

• 2nd将id更改为class后使用

  $（文档）。在（'click'，'add'，function（）{//code here}）上
  
  

你的代码应该是

<script>
        $(document).ready(function(){
            let count = 1;
            $(document).on('click' , '.add' , function(){
                count++;
                dynamic(count);
            });
            dynamic(count);
            function dynamic(number) {
                var html = '' +
                    '<div class="row">\n' +
                    '<div class="col-md-4">\n' +
                    '<input class="form-control" placeholder="Name">\n' +
                    '</div>\n' +
                    '<div class="col-md-4">\n' +
                    '<input class="form-control" placeholder="Link">\n' +
                    '</div>\n' +
                    '<div class="col-md-2">\n' +
                    '<a class="btn btn-primary add">Add</a>\n' +
                    '<a class="btn btn-danger delete">Delete</a>\n' +
                    '</div>\n' +
                    '</div>';
                $('#showDynamic').append(html);
            }
        });
    </script>

$（文档）.ready（函数（）{
让计数=1；
$（文档）。在（'单击'，'添加'，函数（）上）{
计数++；
动态（计数）；
});
动态（计数）；
动态功能（数字）{
var html=''+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
'添加\n'+
'删除\n'+
“\n”+
'';
$（'#showDynamic'）.append（html）；
}
});

$（文档）.ready（函数（）{
让计数=1；
$（文档）。在（'单击'，'添加'，函数（）上）{
计数++；
动态（计数）；
});
动态（计数）；
动态功能（数字）{
var html=''+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
'添加\n'+
'删除\n'+
“\n”+
'';
$（'#showDynamic'）.append（html）；
}
});
我建议对html使用模板文本字符串。为你省下一大堆麻烦。