Add Elements

by Ryan Perez

HTML

<div name="form-group-3">

<div class="form-td"></div>
<div class="form-td"></div>
<div class="form-td"></div>
  <div class="form-td"></div>
  <div class="form-td"></div>
  <div class="form-td"></div>
  <div class="form-td"></div>
    <div class="form-td"></div>
  <div class="form-td"></div>
  <div class="form-td"></div>
  <div class="form-td"></div>
  
</div>

CSS

.form-td {background:black; height:20px; margin-top:20px}
.container-reveal {background:red;margin-top:40px!important;display:none}
.container-reveal {display:none}
.butt {background:blue;width:20px;height:20px;margin-top:20px;color:white} 

 
.hidden {
  display: none;
}
 
.container-reveal .form-td {
    margin-right: 29px;
}
 
.container-reveal i {
    font-size: 38px;
    position: relative;
    /* position: absolute; */
    bottom: -43px;
    margin-left: 8px;
}
.container-reveal input {
    padding: 5px;
}

JavaScript

function addCourse(groupName) {
    
    var parentDiv = $(groupName);
    var childrenDiv  = parentDiv.children();
    var firstChild = childrenDiv.not(':first-child');
    var elems = $(".form-td");
    var wrapper = $('<div class="container-reveal hidden" />');
    var pArrLen = childrenDiv.length;
    
    
    
    for (var i = 0;i < pArrLen;i+=2){
        firstChild.filter(':eq('+i+'),:eq('+(i+1)+')').wrapAll(wrapper);
        
    }
    ;
    
    var reveal = parentDiv.find('.container-reveal');
    
    reveal.first().removeClass('hidden');
    
    reveal.each(function(){
        
        $(this).append('<i class="fa fa-plus-circle butt plus" aria-hidden="true"></i><i class="fa fa-minus-circle  butt minus" aria-hidden="true"></i>');
        
    }
               );
    
    var adddiv = $('.plus');
    var removediv = $('.minus');
    
    
    reveal.each(function() {
        
        $(this).find(adddiv).on('click', function() {
            
            $(this).parent().next().removeClass('hidden');
            $(this).parent().find('.butt').hide();
            
        }
                               );
        
        $(this).find(removediv).on('click', function() {
            
            $(this).parent().addClass('hidden');
            ;
            $(this).parent().prev().find('.butt').show();
            reveal.eq(0).find('.minus').hide();
            
        }
                                  );
        
    }
               );
    
    reveal.eq(0).find('.minus').hide();
    reveal.last().find('.plus').hide();
    

    
    
}
addCourse('div[name="form-group-3"]');