Show Hide withing cloned div
by parkproductions
HTML
<div id="products">
<div id="product1" class="product">
<div class="field" id="delivery_mode_1">
<label class="label has-text-white">Delivery Mode</label>
<div class="control">
<div class="select">
<!-- {{ Form::select('delivery_mode[]', $delivery_modes, null, ['class' => 'delivery_mode']) }} -->
<select name="delivery_mode[]" class="delivery_mode">
<option value="0">Online</option>
<option value="1">FT</option>
<option value="2">PT</option>
</select>
</div>
</div>
</div>
<div class="hidden">
<input name="Monday[]" id="Monday_1" value="1" type="checkbox" class="is-checkradio is-white f_input">
<label for="Monday_1">Monday</label>
</div>
</div>
</div>
<div class="field">
<div id="remove-product" class="control">
<a id="rp" class="button is-fullwidth is-link is-inverted is-outlined"><span class="icon is-small"><i class="fa fa-times"></i></span><span>Remove Product</span></a>
</div>
</div>
<div class="field">
<div id="add-product" class="control">
<a id="ap" class="add button is-fullwidth is-link is-inverted is-outlined" ><span class="icon is-small"><i class="fa fa-plus"></i></span><span>Add Product</span></a>
</div>
</div>
CSS
a{float:left; display:block; clear:left; text-decoration:underline; margin:10px 0px;}
JavaScript
$(document).ready(function(){
var template = $('#products .product:first').clone();
var productsCount = 1;
window.addProduct = function(){
productsCount++;
var product = template.clone().find(':input, div').each(function(){
var newId = this.id.substring(0, this.id.length-1) + productsCount;
$(this).next().attr('for', newId); // update label for
this.id = newId; // update id and name (assume the same)
}).end()
.attr('id', 'product' + productsCount)
.appendTo('#products');
}
$('.add').click(addProduct);
$("a#rp").click(function () {
if ($(".product").length != 1) {
$(".product:last").remove();
}
event.preventDefault();
});
});