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

Question

I'm trying to created a dynamic form in rails with a little bit of javascript I have a problem I only get one row in the output when using pry apparently it's because I have the same params for every field input since I use jQuery.clone, maybe someone has struggled with something similar can share some knowledge, how to dynamically add index to params in this form with 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

Answer 1

• 1st id must be unique.. So change id="add" and id="delete" to classes class="btn btn-primary add"

• 2nd event-binding-on-dynamically-created-elements After changing the id to class use $(document).on('click', '.add', function(){ //code here })

Your code should be

<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>

 $(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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="showDynamic"></div>