After hiding div allow to redisplay on button click

Question

The initial display is to only have the first div displaying. When you select Add Another, the next div will display as well. When you select "Remove" next to that div it will be hidden/removed.

The problem I am having is how to get the div to redisplay if the user selects Add Another. So that they can have a max of 4 divs displaying. Currently after selecting "Remove" if you select "Add Another" it will only display a div if it has not been displayed and removed previously. I would like the user to always have the option of adding all 4 divs even if they were to add one then remove it and then would like to add it back.

Here is my current code:

//Remove div when clicked  
$('#donation_element1_row').show();
$('.removeDiv').click( function() {
    $(this).closest('div[id*="donation_element"]').hide();
});
//Add another designation
var count = 0,
$allDivs = $('#donation_element2_row, #donation_element3_row, #donation_element4_row');
$('#addAnother').click( function() {
    if( count < $allDivs.length ) {
        $allDivs.eq( count ).fadeIn( 'slow' );
        count++;
    }
});

#addAnother {
    display: inline-block;
    width: 236px;
    height: 50px;
    line-height: 44px;
    text-align: center;
    border: 3px solid #f8a61b;
    color: #860005;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 0px;
    margin-top: 20px;
    cursor: pointer;
    background-color: #f8a61b;
}

div[id*='donation_element'] {
    background-color: blue;
    color: #fff;
    display: none;
    margin: 10px;
    max-width: 200px;
}
.removeDiv {
    cursor: pointer;
    text-align: right;
    background-color: #333;
    text-align: center;
}
p {
    text-align: center;
    padding-top: 10px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="donation_element1_row">
    <p>Div 1</p>
    <div class="removeDiv">Remove X</div>
</div>
<div id="donation_element2_row">
    <p>Div 2</p>
    <div class="removeDiv">Remove X</div>
</div>
<div id="donation_element3_row">
    <p>Div 3</p>
    <div class="removeDiv">Remove X</div>
</div>
<div id="donation_element4_row">
    <p>Div 4</p>
    <div class="removeDiv">Remove X</div>
</div>
<div id="addAnother">+ Add Another</div>

Answer 1

You don't need any counter,
make your code flexible to account for any number of donation elements

var $donation = $(".donation");
var $donationAdd = $(".donation-add");
var $donationRemove = $(".donation-remove");
var donationTot = $donation.length;

function donationHandler () {
  if ($donation.filter(":visible").length >= donationTot) {
    $donationAdd.prop("disabled", true);
  }
}

$donationAdd.on("click", function() {
  $donation.filter(":hidden").eq(0).show();
  donationHandler();
});

$donationRemove.on("click", function() {
  $(this).closest(".donation").hide();
  donationHandler();
});

*{margin:0; box-sizing:border-box;}

.donation {
  padding: 10px;
  background: #eee;
  margin-bottom: 10px;
}

.donation ~ .donation{
  display: none;
}

<div class="donation">
  <p>Div 1</p>
  <button type="button" class="donation-remove">&times; Remove</button>
</div>
<div class="donation">
  <p>Div 2</p>
  <button type="button" class="donation-remove">&times; Remove</button>
</div>
<div class="donation">
  <p>Div 3</p>
  <button type="button" class="donation-remove">&times; Remove</button>
</div>
<div class="donation">
  <p>Div 4</p>
  <button type="button" class="donation-remove">&times; Remove</button>
</div>

<button type="button" class="donation-add">+ Add</button>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

You can also use the below code. So when you delete the div, append it to the end. This will help you for more than 4 divs.

//Remove div when clicked  
$('#donation_element1_row').show();

$('.removeDiv').click( function() {
	$(this).parent().hide();
  $("#parent_donation_container").append($(this).parent());
});

$('#addAnother').click( function() {    
    $(".donation_element").not(":visible").first().fadeIn( 'slow' );
});

#addAnother {
    display: inline-block;
    width: 236px;
    height: 50px;
    line-height: 44px;
    text-align: center;
    border: 3px solid #f8a61b;
    color: #860005;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 0px;
    margin-top: 20px;
    cursor: pointer;
    background-color: #f8a61b;
}

div[id*='donation_element'] {
  background-color: blue;
  color: #fff;
  display: none;

  margin: 10px;
  max-width: 200px;
  }
  
  .removeDiv {
    cursor: pointer;
    text-align: right;
    background-color: #333;
    text-align: center;
    }
p {
  text-align: center;
  padding-top: 10px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="parent_donation_container">
    <div id="donation_element1_row" class="donation_element"><p>
    Div 1</p><div class="removeDiv">Remove X</div></div>
    <div id="donation_element2_row" class="donation_element"><p>
    Div 2</p><div class="removeDiv">Remove X</div></div>
    <div id="donation_element3_row" class="donation_element"><p>
    Div 3</p><div class="removeDiv">Remove X</div></div>
    <div id="donation_element4_row" class="donation_element"><p>
    Div 4</p><div class="removeDiv">Remove X</div></div>
</div>

<div id="addAnother">+ Add Another</div>

https://jsfiddle.net/fye8qjk1/11/

Answer 3

You're almost there. When you remove an item you also need to increment the count down, and add the first div to the list of divs. For example:

$('.removeDiv').click( function() {
  $(this).closest('div[id*="donation_element"]').hide();
  count --;
});

$allDivs = $('#donation_element1_row, #donation_element2_row, #donation_element3_row, #donation_element4_row');

Fiddle here: https://jsfiddle.net/ofw4g2ym/2/