add more field using jquery

Question

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









 
 
 @lang('app.addMore')

$("body").on("click",".add-more",function(){ 
var html = $(".partPending").first().clone();
$(html).find(".change").html(" 
- Remove");
$(".partPending").last().after(html);
});
 $("body").on("click",".remove",function(){ 
        $(this).parents(".partPending").remove();    
});

How can i get the desired result. Please help

user_3634011 · Answer

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(" 
- Remove");
$(".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%;
   }










 
 
 @lang('app.addMore')

add more field using jquery

1 Answers