Limit number of repeated divs using JQuery

Question

I have this layout:

<div class="checkmark-outer">
    <div class="checkmark-33">
        <div class="fa-stack fa-1x checkmark-icon">
            <i class="fa fa-circle fa-stack-2x icon-background"></i>    
            <i class="fa fa-check fa-stack-1x icon-text"></i>
        </div>
        <div class="checkmark-inner">Option 1</div>
    </div>
    <div class="fa-stack fa-1x checkmark-icon">
        <i class="fa fa-circle fa-stack-2x icon-background"></i>
        <i class="fa fa-check fa-stack-1x icon-text"></i>
    </div>
    <div class="checkmark-inner">Option 2</div>
</div>
<div class="fa-stack fa-1x checkmark-icon">
    <i class="fa fa-circle fa-stack-2x icon-background"></i>
    <i class="fa fa-check fa-stack-1x icon-text"></i>
</div>
<div class="checkmark-inner">Option 3</div>
</div>
</div>
</div>

Using JQuery is there a way for me onload limit the number of checkmark-33 divs inside checkmark-outer to say 2 then when you click on this div

<div class="read-more-show">Show More</div>

It loads all of the divs inside checkmark-33? I have this so far, but I can only seem to get this to work onload, and when I apply this to the button it changes nothing?

jQuery(document).ready(function(){    
    jQuery('.checkmark-outer > .checkmark-33').slice(6).remove();
});

Thanks in advance!

Answer 1

Please check this demo

https://jsfiddle.net/pkwhd9vq/

you have to fix your html first,

   <div class="checkmark-outer">
    <div class="checkmark-33">
    <ul>
    <li>
        <div class="fa-stack fa-1x checkmark-icon">
            <i class="fa fa-circle fa-stack-2x icon-background"></i>    
            <i class="fa fa-check fa-stack-1x icon-text"></i>
        </div>
        <div class="checkmark-inner">Option 1</div>
    </li>
    <li>
    <div class="fa-stack fa-1x checkmark-icon">
        <i class="fa fa-circle fa-stack-2x icon-background"></i>
        <i class="fa fa-check fa-stack-1x icon-text"></i>
    </div>
    <div class="checkmark-inner">Option 2</div>
</li><li>
    <div class="fa-stack fa-1x checkmark-icon">
        <i class="fa fa-circle fa-stack-2x icon-background"></i>
        <i class="fa fa-check fa-stack-1x icon-text"></i>


    </div>

    <div class="checkmark-inner">Option 3</div>
        </li>
        </ul>
        </div>
    </div>

    <div class="read-more-show">Show More</div>

then add you have to find all list items and slicewith jquery

jQuery(document).ready(function(){    
$('.checkmark-33 ul').each(function(){ 

$(this).find('li').slice(2).wrap("<ul class='hide'></ul>");

});
$('.read-more-show').on("click",function(){
$(".hide").toggle();
});
});

then hide wrapper dive with css

.hide{
  display:none;

}