I am attempting to incorporate HTML divs (with textfields) through a button click event. The structure of my form is as follows:
When the add size button is clicked, it adds one row containing Price and size. Upon clicking the add More item button, I wish to append a new section with fields for name, price, and size, repeating this process.
Here's a snippet of the HTML code:
<div class="clearfix"></div>
<div class="moreitems form-group" style="border:1px solid #ccc;height:200px;display:none;">
</div>
Below is my JavaScript code:
jQuery("#addmoreitems").click(function () {
var options = jQuery("#select1").html();
jQuery('.moreitems').css("display","block");
var fld = '<div class="clearfix"></div><div class="form-group"><div class="col-sm-3"><label for="" class="text-left control-label">Product Name :</label></div><div class="col-sm-4"><input type="text" class="required-entry form-control" name="pname[]" id="pname"></div></div></div>';
fld += '<div class="clearfix"></div><div class="form-group"><div class="col-sm-3"><label for="" class="text-left control-label">Price :</label></div><div class="col-sm-4"><input type="text" class="required-entry form-control" name="more_prices[]" id="prices"><select name="more_size[]" class="mysize">'+options+'</select></div></div>';
fld += '<div class="col-sm-4"><div class="col-sm-3" style="margin-top:15px;"><button type="button" id="addsize" class="btn btn-info">Add Size</button></div></div>';
jQuery('.moreitems').append(fld);
jQuery('.mysize').html(options);
});
Currently, this code only adds elements on the first click. My goal is to have it add additional items each time the 'add more items' button is clicked. Additionally, when the 'add more size' button is clicked, I want to include fields for price and size.