dynamically added input fields

 @extends('layouts.app')

@section('content')

<div class="col-lg-10 ">

    <div class="panel">

        <div class="panel-heading">

            <h3 class="panel-title">{{translate('Delivery Boy form')}}</h3>

        </div>

        <!--Horizontal Form-->

        <!--===================================================-->

        <form class="form-horizontal" action="{{ route('delivery-boy.store') }}" method="POST" enctype="multipart/form-data">

        @csrf

            <div class="panel-body">

                <div class="form-group">

                    <label class="col-sm-3 control-label" for="name">{{translate('Name')}}</label>

                    <div class="col-sm-9">

                        <input type="text" placeholder="{{translate('Name')}}" id="name" name="name" class="form-control" required>

                    </div>

                </div>

                <div class="form-group">

                    <label class="col-sm-3 control-label" for="email">{{translate('Email Address')}}</label>

                    <div class="col-sm-9">

                        <input type="text" placeholder="{{translate('Email Address')}}" id="email" name="email" class="form-control" required>

                    </div>

                </div>

                <div class="form-group">

                    <label class="col-sm-3 control-label" for="phone">{{translate('Mobile No ')}}</label>

                    <div class="col-sm-9">

                        <input type="text" placeholder="{{translate('Mobile No')}}" id="phone" name="phone" class="form-control" required>

                    </div>

                </div>

                <div class="form-group">

                    <label class="col-xs-12 col-sm-3 control-label" for="phone">{{translate('Pin Code')}}</label>

                    <div class="col-xs-10 col-sm-7">

                        <input type="text" placeholder="{{translate('Pin')}}" id="dboy_pin" name="dboy_pin[]" class="form-control" required>

                    </div>

                    <div class="col-xs-2 col-sm-2">

                        <button id="addRow" type="button" class="btn btn-info"> <i class="fa fa-plus"></i></button>

                    </div>

                     

                </div>

                 <div id="newPin"></div>

                <div class="form-group">

                    <label class="col-sm-3 control-label" for="phone">{{translate('Address')}}</label>

                    <div class="col-sm-9">

                        <input type="text" placeholder="{{translate('Address')}}" id="dboy_address" name="dboy_address" class="form-control" required>

                    </div>

                </div>

                <hr>

                <div class="form-group">

                    <label class="col-sm-3 control-label" for="phone">{{translate('Bank Name')}}</label>

                    <div class="col-sm-9">

                        <input type="text" placeholder="{{translate('Bank Name')}}" id="bank_name" name="bank_name" class="form-control" required>

                    </div>

                </div>

                <div class="form-group">

                    <label class="col-sm-3 control-label" for="phone">{{translate('Branch')}}</label>

                    <div class="col-sm-9">

                        <input type="text" placeholder="{{translate('Branch')}}" id="bank_branch" name="bank_branch" class="form-control" required>

                    </div>

                </div>

                <div class="form-group">

                    <label class="col-sm-3 control-label" for="phone">{{translate('Account Number')}}</label>

                    <div class="col-sm-9">

                        <input type="text" placeholder="{{translate('Account Number')}}" id="bank_acc_number" name="bank_acc_number" class="form-control" required>

                    </div>

                </div>

                <div class="form-group">

                    <label class="col-sm-3 control-label" for="phone">{{translate('IFSC')}}</label>

                    <div class="col-sm-9">

                        <input type="text" placeholder="{{translate('IFSC')}}" id="bank_acc_ifsc" name="bank_acc_ifsc" class="form-control" required>

                    </div>

                </div>

                <div class="form-group">

                    <label class="col-sm-3 control-label" for="dairy_schedule_img">{{translate('Adhar')}}</label>

                    <div class="col-sm-9">

                        <input type="file" placeholder="{{translate('Adhar')}}" id="adhar" name="adhar" class="form-control" />

                    </div>

                </div>

                <div class="form-group">

                    <label class="col-sm-3 control-label" for="password">{{translate('Password')}}</label>

                    <div class="col-sm-9">

                        <input type="password" placeholder="{{translate('Password')}}" id="password" name="password" class="form-control" required>

                    </div>

                </div>

            </div>

            <div class="panel-footer text-right" style="margin-bottom:10px">

                <button class="btn btn-purple" type="submit">{{translate('Save')}}</button>

            </div>

        </form>

        <!--===================================================-->

        <!--End Horizontal Form-->

    </div>

</div>

@endsection

@section('script')

<script>

$(document).ready(function(){

    var i=1;

    $("#addRow").click(function(){

        i++;

        var html='';

        html+='<div class="form-group newlyAdded" id="addRow_'+i+'">';

        html+='<label class="col-xs-12 col-sm-3 control-label" for="phone">Pin code'+i+' </label>'

        html+='<div class="col-xs-10 col-sm-7">';

        html+='<input type="text" placeholder="{{translate('Pin')}}" id="dboy_pin_'+i+'" name="dboy_pin[]" class="form-control">'

        html+='</div>';

        html+='<div class="col-xs-2 col-sm-2 ">';

        html+='<button id="'+i+'" type="button" class="btn btn-danger btn_remove"> <i class="fa fa-minus"></i></button>';

        html+='</div>';

        html+='</div>';

        $("#newPin").append(html);

    });

    

    $(document).on('click', '.btn_remove', function(){ 

        var button_id=$(this).attr('id');

        var last= $('#addRow_'+button_id+'').remove();

       //alert(last);

    });

    

    

});

</script>

@endsection