jQuery remove appended div element(s) in order

Question

I'm creating a registration form where the user may need to enter up to 10 directors details. I want to display only one set of director questions to begin with, and if needs be the user can click '+ director' to add further details.

this appends a div to the .director_wrapper (which works fine). However, I also want to include a remove button in case they append too many director classes to the parent element.

My code so far removes one div when the '-director' button is clicked but I can't figure out why it only removes one, and doesn't continue to remove the others when clicked.

    var director    =  $('.director');
    var dirClone    =  $('.director').html();
    var wrapper     =  $('.director_wrapper');
    var count       =  1;
    var maxField    =  10;
    var removeBtn   =  $('.remove_dir');
    
    
    
   
    $('.add_dir').on('click', function(e){
        e.preventDefault;
        if(count < maxField){
            $(wrapper).append(dirClone);
            count ++;   
            $(removeBtn).removeClass('disabled');
        };
       
    });

  
    $(removeBtn).click('click', function(e){
        e.preventDefault;
        $('.director_wrapper div.director:last').remove();
        count--;
        console.log(count);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="director_wrapper">
        <div class="row break dir_btn">
            <hr>
            <h2>Director Details</h2>
            <button type="button" class="btn add_dir"><strong>+ director</strong></button>
            <button type="button" class="btn remove_dir disabled"><strong>- director</strong></button>
        </div>
<div class="director">
        <label for="exampleInputPassword1">Director</label>
        <div class="form-inline">
           
        <div class="form-group">
            <input type="email" class="form-control custom-address" id="exampleInputEmail3" placeholder="Line 1">
        </div>
            <div class="form-group">
            <input type="email" class="form-control custom-address" id="exampleInputEmail3" placeholder="Line 2">
        </div>
        <div class="form-group">
           
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Line 3">
        </div>
        <div class="form-group">
            
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="City">
        </div>
        <div class="form-group">
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Country">
        </div>
        <div class="form-group">
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Postcode or equivalent">
        </div>
        <div class="form-group">
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Phone Number">
        </div>
        <div class="form-group">
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Email">
        </div>
        
  
        </div>
        
</div> <!-- close director div -->
    
</div> <!-- close director_wrapper div -->

Answer 1

The problem is your second line: $('.director').html();. .html() only gets the inner HTML of the element. There's a DOM property called outerHTML that you can use instead to get the right HTML

    var director    =  $('.director');
    var dirClone    =  $('.director').prop('outerHTML');
    var wrapper     =  $('.director_wrapper');
    var count       =  1;
    var maxField    =  10;
    var removeBtn   =  $('.remove_dir');
    
    
    
   
    $('.add_dir').on('click', function(e){
        e.preventDefault;
        if(count < maxField){
            $(wrapper).append(dirClone);
            count ++;   
            $(removeBtn).removeClass('disabled');
        };
       
    });

  
    $(removeBtn).click('click', function(e){
        e.preventDefault;
        $('.director_wrapper div.director:last').remove();
        count--;
        console.log(count);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="director_wrapper">
        <div class="row break dir_btn">
            <hr>
            <h2>Director Details</h2>
            <button type="button" class="btn add_dir"><strong>+ director</strong></button>
            <button type="button" class="btn remove_dir disabled"><strong>- director</strong></button>
        </div>
<div class="director">
        <label for="exampleInputPassword1">Director</label>
        <div class="form-inline">
           
        <div class="form-group">
            <input type="email" class="form-control custom-address" id="exampleInputEmail3" placeholder="Line 1">
        </div>
            <div class="form-group">
            <input type="email" class="form-control custom-address" id="exampleInputEmail3" placeholder="Line 2">
        </div>
        <div class="form-group">
           
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Line 3">
        </div>
        <div class="form-group">
            
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="City">
        </div>
        <div class="form-group">
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Country">
        </div>
        <div class="form-group">
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Postcode or equivalent">
        </div>
        <div class="form-group">
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Phone Number">
        </div>
        <div class="form-group">
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Email">
        </div>
        
  
        </div>
        
</div> <!-- close director div -->
    
</div> <!-- close director_wrapper div -->