Having trouble with jquery detach reshowing div content

Question

I am having a hard time wrapping my head around jquery detach, well, the detach part is ok, it's getting the content to come back I am having an issue with. Basically, I have divs that display based on selections from a checkbox, and they are alternating styles based on nth row, so the primary issue was that when a row was hidden it was technically still there so the styles weren't alternating correctly. I found jquery detach searching for a solution to my nth row issue and it seems like the right direction, but I am new to it and having trouble. Here is the javascript I have:

$(document).ready(function () {

$(".classes input[type='checkbox']").click(function(e) {
       var innerTextHTML = $(this).parent("div.selection").children('label').text();
       var planWrap = $("div.plan."+innerTextHTML).parent();

       var detachedContent = $("div.plan."+innerTextHTML).parent();

       if ($(this).is(':checked')){
             planWrap.show();
             detachedContent.appendTo('div.plans-container');
       }else{
             planWrap.detach();
       }
});
});

Now, when I uncheck the box to filter, the rows are displaying correctly with style, but when I re-check the box, my div isn't coming back. Thank you for any help you can provide.

EDIT: Adding snippets of HTML:

Checkbox code:

<div class="speeds" id="int_div_id">
          <h4>Speeds:</h4>
          <div class="checks">
            <div class="selection">
              <input type="checkbox" id="10" name="chkSpeedType" value="10" checked="checked">
              <label for="10"><span></span>10</a></label>
            </div>

            <div class="selection">
              <input type="checkbox" id="20" name="chkSpeedType" value="20" checked="checked">
              <label for="20"><span></span>20</label>
            </div>

            <div class="selection">
              <input type="checkbox" id="30" name="chkSpeedType" value="30" checked="checked">
              <label for="30"><span></span>30</label>
            </div>

          </div>
        </div>

Sample output row (wrapped within the plans-container div):

<div class="plans-container">

<div class="plans plansSlider" id="listings">

  <div class="bundle-hide-me" id="default"><div class="plan-wrap">
        <div class="plan 10">
          <div class="items-wrap">
            <div class="items">

            // content of the div

            </div>
          </div>
        </div>
  </div>
</div>
</div>

EDIT: Desired result:

Here is a sample of how I would like the page to behave:

X 10   X 20   X 30

Result for 10 // style-a
Result for 10 // style-b
Result for 20 // style-a
Result for 20 // style-b
Result for 20 // style-a
Result for 30 // style-b
Result for 30 // style-a

Then if a box is unchecked:

X 10   _ 20   X 30

Result for 10 // style-a
Result for 10 // style-b
Result for 30 // style-a
Result for 30 // style-b

Then if rechecked:

X 10   X 20   X 30

Result for 10 // style-a
Result for 10 // style-b
Result for 20 // style-a
Result for 20 // style-b
Result for 20 // style-a
Result for 30 // style-b
Result for 30 // style-a

Answer 1

Run this. This uses the detach, saves a copy of jquery data and adds it back when needed.

 $(document).ready(function () { var detachedContent; $("input[type='checkbox']").click(function(e) { var innerTextHTML = $(this).parent("div.selection").children('label').text(); var planWrap = $("div.plan."+innerTextHTML).parent(); if ($(this).is(':checked')){ planWrap.show(); $('div.plans-container').append(detachedContent); }else{ detachedContent = planWrap.detach(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="speeds" id="int_div_id"> <h4>Speeds:</h4> <div class="checks"> <div class="selection"> <input type="checkbox" id="10" name="chkSpeedType" value="10" checked="checked"> <label for="10"><span></span>10</a></label> </div> <div class="selection"> <input type="checkbox" id="20" name="chkSpeedType" value="20" checked="checked"> <label for="20"><span></span>20</label> </div> <div class="selection"> <input type="checkbox" id="30" name="chkSpeedType" value="30" checked="checked"> <label for="30"><span></span>30</label> </div> </div> <div class="plans-container"> <div class="plans plansSlider" id="listings"> <div class="bundle-hide-me" id="default"><div class="plan-wrap"> <div class="plan 10"> <div class="items-wrap"> <div class="items"> // content of the div </div> </div> </div> </div> </div> </div>