How to dynamically add form elements in 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

I recommend using template literal strings for html. Saves you a ton of strife. — John, Jan 06 '21 at 22:09

Mohamed-Yousef · Accepted Answer · 2021-01-06T22:14:42.233

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>

How to dynamically add form elements in jquery?

1 Answers1