0
<script type="text/javascript">  
    jQuery(document).ready(function() {
        var max_fields        = 5; //maximum input boxes allowed
        var wrapper_image    = $(".input_image_wrap"); //Fields wrapper
        var add_button_image = $(".add_field_button_image"); //Add button ID
        var button_product   = $(".add_product_button");
        var wrapper_product    = $(".input_product_wrap");
        var image = 1; //initlal text box count
        jQuery(add_button_image).click(function(e){ //on add input button click
            e.preventDefault();
            if(image < max_fields){ //max input box allowed
                image++; //text box increment
                jQuery(wrapper_image).append('<div><hr>' + image + '<div class="col-md-6 col-sm-6 col-lg-6 col-xs-12"><div id="product_image_rows1"><input name="product_img[]" id="friend_name-0" value="" class="btn" type="file"></div></div><a href="#" type="button" class="btn btn-danger remove_field_image">Remove</a></div>'); //add input box   
            }
        });
        jQuery(wrapper_image).on("click",".remove_field_image", function(e){ //user click on remove text
            e.preventDefault(); jQuery(this).parent('div').remove(); image--;
        })
        var product = 1;
        jQuery(button_product).click(function(e){ //on add input button click
            e.preventDefault();
            if(product < max_fields){ //max input box allowed
                product++; //text box increment
                jQuery(wrapper_product).append('<div><hr>' + product + '<div class="repeater-cust"><div class="row">    <div class="col-md-3 col-sm-3 col-lg-3 col-xs-12">        <label style="display: block;">        Name <span            class="acf-required">*</span>        <!-- <i class="fa fa-question-circle" ></i> -->        </label>    </div>    <div class="col-md-9 col-sm-9 col-lg-9 col-xs-12">        <input name="name1" id="friend_name-0"               value=""        class="form-control" type="text" required=""        placeholder="Enter Your Product Name...">    </div></div><div class="row">    <div class="col-md-3 col-sm-3 col-lg-3 col-xs-12">        <label style="display: block;">        Description <span            class="acf-required">*</span>        <!-- <i class="fa fa-question-circle" ></i> -->        </label>    </div>    <div class="col-md-9 col-sm-9 col-lg-9 col-xs-12">        <textarea name="description1" class="form-control"        required=""        placeholder="Enter Your Product Description..."></textarea>    </div></div><div class="row">    <div class="col-md-3 col-sm-3 col-lg-3 col-xs-12">        <label style="display: block;">        Video        <!-- <i class="fa fa-question-circle" ></i> -->        </label>    </div>    <div class="col-md-9 col-sm-9 col-lg-9 col-xs-12">        <input name="product_video[]" id="friend_name-0"        value=""        accept="video/*" class="btn"        type="file">    </div>    <div        class="col-md-12 col-sm-12 col-lg-12 col-xs-12 text-center">        OR    </div>    <div class="col-md-3 col-sm-3 col-lg-3 col-xs-12">        <label style="display: block;">        Youtube Link        <!-- <i class="fa fa-question-circle" ></i> -->        </label>    </div>    <div class="col-md-9 col-sm-9 col-lg-9 col-xs-12">        <input name="product_youtube_link1" id="friend_name-0"        value=""        class="form-control" type="text">    </div></div></div><div class="row input_image_wrap"><div class="col-md-3 col-sm-3 col-lg-3 col-xs-12">    <label style="display: block;">        Image        <!-- <i class="fa fa-question-circle" ></i> -->    </label></div><div class="col-md-6 col-sm-6 col-lg-6 col-xs-12">    <div id="product_image_rows1">        <input name="product_img[]" id="friend_name-0"               value=""        class="btn" type="file">    </div></div><div class="col-md-3 col-sm-3 col-lg-3 col-xs-12">    <div class="acf-form-submit">        <input value="Add More Product Image"        class="button button-success button-large add_field_button_image"        type="button" >    </div></div></div><hr><div class="form-group input_product_wrap"><div class="row">    <div class="col-md-12 col-sm-12 col-lg-12 col-xs-12">        <label style="display: block;">Markets </label>        <div class="repeater-cust">            <div class="row">                <div class="col-md-3 col-sm-3 col-lg-3 col-xs-12">                    <label style="display: block;">                        Market                    </label>                </div>                <div class="col-md-9 col-sm-9 col-lg-9 col-xs-12">                    <input name="market1" id="friend_name-0"                  value=""                    class="form-control" type="text" required=""                    placeholder="Enter the market...">                </div>            </div>            <div class="row">                <div class="col-md-3 col-sm-3 col-lg-3 col-xs-12">                    <label style="display: block;">                        Size                    </label>                </div>                <div class="col-md-9 col-sm-9 col-lg-9 col-xs-12">                    <input name="market_size1" id="friend_name-0"                    value=""                    class="form-control" type="text" required=""                    placeholder="Enter the market size...">                </div>            </div>            <div class="row">                <div class="col-md-3 col-sm-3 col-lg-3 col-xs-12">                    <label style="display: block;">                        Annual Growth Rate                    </label>                </div>                <div class="col-md-9 col-sm-9 col-lg-9 col-xs-12">                    <input name="growth_rate1" id="friend_name-0" value="" class="form-control" type="text" required="" placeholder="Enter the Annual Growth Rate...">                </div>            </div>        </div>    </div></div></div><a href="#" type="button" class="btn btn-danger remove_field_product">Remove</a></div>'); //add input box   
            }
        });
        jQuery(wrapper_product).on("click",".remove_field_product", function(e){ //user click on remove text
            e.preventDefault(); jQuery(this).parent('div').remove(); product--;
        })
    });
</script>
Name * --> Description * --> Video --> OR Youtube Link --> Image -->
Markets Market Size Annual Growth Rate
  • 1
    please format your code in order to show a working code snippet. otherwise it's impossible for us to debug it – Mihai T Oct 22 '20 at 09:35
  • Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – freedomn-m Oct 22 '20 at 09:44
  • Seems to work okay for me. – Mattt Nov 03 '20 at 21:04

0 Answers0