Add HTML Inputbox Dynamically using button

Question

this is my code to generate input boxes, it generate boxes but the generated add more button will not work. New files can only be added using the first static button

                            <script type='text/javascript'>
                                $(document).ready(function() {
                                var max_fields = 10;
                                var wrapper = $(".container1");
                                var add_button = $(".add_form_field");

                                var x = 1;
                                $(add_button).click(function(e) {
                                    e.preventDefault();
                                    if (x < max_fields) {
                                        x++;
                                        $(wrapper).append('<div class="pl-lg-7" id="toremove"> <div class="form-check-inline"> <div class="form-group{{$errors->has('item_name') ? ' has-danger' : ''}}"> <label class="form-control-label" for="input-name">{{__('Item Name')}}</label> <input type="text" name="item_name[]" id="input-name" class="form-control form-control-alternative{{$errors->has('item_name') ? ' is-invalid' : ''}}" placeholder="{{__('Item Name')}}" value="{{old('item_name')}}" required autofocus> @if ($errors->has('item_name')) <span class="invalid-feedback" role="alert"> <strong>{{$errors->first('item_name')}}</strong> </span> @endif </div></div><div class="form-check-inline"> <div class="form-group{{$errors->has('item_amount') ? ' has-danger' : ''}}"> <label class="form-control-label" for="input-name">{{__('Item Amount')}}</label> <input type="text" name="item_amount[]" id="input-name" class="form-control form-control-alternative{{$errors->has('item_amount') ? ' is-invalid' : ''}}" placeholder="{{__('Item Amount')}}" value="{{old('item_amount')}}" required autofocus> @if ($errors->has('item_amount')) <span class="invalid-feedback" role="alert"> <strong>{{$errors->first('item_amount')}}</strong> </span> @endif </div></div><div class="form-check-inline"> <div class="form-group{{$errors->has('item_qty') ? ' has-danger' : ''}}"> <label class="form-control-label" for="input-name">{{__('Item Qty')}}</label> <input type="text" name="item_qty" id="input-name" class="form-control form-control-alternative{{$errors->has('item_qty') ? ' is-invalid' : ''}}" placeholder="{{__('Item Qty')}}" value="{{old('item_qty')}}" required autofocus> @if ($errors->has('item_qty')) <span class="invalid-feedback" role="alert"> <strong>{{$errors->first('item_qty')}}</strong> </span> @endif </div></div><div class="form-check-inline"> <div class="form-group{{$errors->has('item_name') ? ' has-danger' : ''}}"> <label class="form-control-label" for="input-name">{{__('Action')}}</label> <div class="text-center"> <a class="btn btn-primary text-white add_form_field">{{__('+')}}</a> <a class="btn btn-danger text-white delete">{{__('-')}}</a> </div></div></div></div>'); //add input box
                                    } else {
                                        alert('You Reached the limits')
                                    }
                                });

                                $(wrapper).on("click", ".delete", function(e) {
                                    e.preventDefault();
                                $(this).closest('#toremove').slideUp();
                                x--;
                                })
                            });
                            </script>

Answer 1

you need to use .on to bind click event on dynamiclaly generated elements

$(document).on('click',".add_form_field",function(e) {
     e.preventDefault();
     if (x < max_fields) {
         x++;
        $(wrapper).append('<div class="pl-lg-7" id="toremove"> <div class="form-check-inline"> <div class="form-group{{$errors->has('item_name') ? ' has-danger' : ''}}"> <label class="form-control-label" for="input-name">{{__('Item Name')}}</label> <input type="text" name="item_name[]" id="input-name" class="form-control form-control-alternative{{$errors->has('item_name') ? ' is-invalid' : ''}}" placeholder="{{__('Item Name')}}" value="{{old('item_name')}}" required autofocus> @if ($errors->has('item_name')) <span class="invalid-feedback" role="alert"> <strong>{{$errors->first('item_name')}}</strong> </span> @endif </div></div><div class="form-check-inline"> <div class="form-group{{$errors->has('item_amount') ? ' has-danger' : ''}}"> <label class="form-control-label" for="input-name">{{__('Item Amount')}}</label> <input type="text" name="item_amount[]" id="input-name" class="form-control form-control-alternative{{$errors->has('item_amount') ? ' is-invalid' : ''}}" placeholder="{{__('Item Amount')}}" value="{{old('item_amount')}}" required autofocus> @if ($errors->has('item_amount')) <span class="invalid-feedback" role="alert"> <strong>{{$errors->first('item_amount')}}</strong> </span> @endif </div></div><div class="form-check-inline"> <div class="form-group{{$errors->has('item_qty') ? ' has-danger' : ''}}"> <label class="form-control-label" for="input-name">{{__('Item Qty')}}</label> <input type="text" name="item_qty" id="input-name" class="form-control form-control-alternative{{$errors->has('item_qty') ? ' is-invalid' : ''}}" placeholder="{{__('Item Qty')}}" value="{{old('item_qty')}}" required autofocus> @if ($errors->has('item_qty')) <span class="invalid-feedback" role="alert"> <strong>{{$errors->first('item_qty')}}</strong> </span> @endif </div></div><div class="form-check-inline"> <div class="form-group{{$errors->has('item_name') ? ' has-danger' : ''}}"> <label class="form-control-label" for="input-name">{{__('Action')}}</label> <div class="text-center"> <a class="btn btn-primary text-white add_form_field">{{__('+')}}</a> <a class="btn btn-danger text-white delete">{{__('-')}}</a> </div></div></div></div>'); //add input box
      } else {
         alert('You Reached the limits')
      }
});

Answer 2

This happens because you are are not using event-delegation for dynamically added/created elements. All you need to do, is to change your click handler to on handler following the same approach as for .delete click handler.