I have 2 input fields 1 for image and 1 for video. I want to add more fields when +Add More button is pressed. Here is the code
<div class="row p-20 partPending">
<div class="col-lg-6">
<x-forms.file allowedFileExtensions="png jpg jpeg" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partImage')" fieldName="part_image"
fieldId="part_image" />
</div>
<div class="col-lg-6">
<x-forms.file allowedFileExtensions=" mp4 avi " allowedFileSize=" 1mb" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partVideo')" fieldName="part_video"
fieldId="part_video" />
</div>
</div>
<div class="row px-lg-4 px-md-4 px-3 pb-3 pt-0 mb-3 mt-2">
<div class="col-md-12">
<a class="f-15 f-w-500" href="javascript:;" id="add-more"><i
class="icons icon-plus font-weight-bold mr-1"></i>@lang('app.addMore')</a>
</div>
</div>
$("body").on("click",".add-more",function(){
var html = $(".partPending").first().clone();
$(html).find(".change").html("<label for=''> </label><br/><a class='btn btn-danger remove'>- Remove</a>");
$(".partPending").last().after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".partPending").remove();
});
How can i get the desired result. Please help
your issue is about wrong CSS selector :
$("body").on("click",".add-more",function(){
should be :
$("body").on("click","#add-more",function(){
ALSO your codes will correctly adds your desired element, but the element contents is nothing so you cannot view it . you can get some style to the element for view it :
.partPending {
display:block;
background:yellow;
height: 20px;
border:1px black solid;
width:100%;
}
check it in the snippet :
$("body").on("click","#add-more",function(){
var html = $(".partPending").first().clone();
$(html).find(".change").html("<label for=''> </label><br/><a class='btn btn-danger remove'>- Remove</a>");
$(".partPending").last().after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".partPending").remove();
});div{
background : green;
}
.partPending {
display:block;
background:yellow;
height: 20px;
border:1px black solid;
width:100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row p-20 partPending">
<div class="col-lg-6">
<x-forms.file allowedFileExtensions="png jpg jpeg" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partImage')" fieldName="part_image"
fieldId="part_image" />
</div>
<div class="col-lg-6">
<x-forms.file allowedFileExtensions=" mp4 avi " allowedFileSize=" 1mb" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partVideo')" fieldName="part_video"
fieldId="part_video" />
</div>
</div>
<div class="row px-lg-4 px-md-4 px-3 pb-3 pt-0 mb-3 mt-2">
<div class="col-md-12">
<a class="f-15 f-w-500" href="javascript:;" id="add-more"><i
class="icons icon-plus font-weight-bold mr-1"></i>@lang('app.addMore')</a>
</div>
</div>