My js pagination code is not working, completely lost as to what is causing it

I have a pagination set up that I have used many time before... works great for lists and simple paragraphs, but I am unable to get it to work with a more complex html code, which is listed below. For some reason, the js refuses to turn the below code into a set object in order to paginate.

<div class="properties-content">
    <div id="paging_container8" class="container">
        <div class="storybody">
            <p>
                <!---------- Property Start ---------->
                <article class="hentry">
                    <div class="property-featured"> <a class="content-thumb" href="property-details.html"> <img src="images/property/property3.jpg" alt=""> </a> <span class="property-label last">Last one left</span> <span class="property-category"><a href="#">Single Family Home</a> </span> </div>
                    <div class="property-wrap">
                        <h2 class="property-title"> <a href="property-details.html" title="Single Family Residential, NJ">Single Family Residential, NJ</a> </h2>
                        <div class="property-excerpt">
                            <p>Classic 60's ranch living. House has hardwood floors and hard coat plaster walls and ceilings...</p>
                            <p class="property-fullwidth-excerpt">Classic 60's ranch living. House has hardwood floors and hard coat plaster walls and ceilings in good condition. Intimate backyard for private gatherings. Full basement...</p>
                        </div>

                        <div class="property-summary">
                            <div class="property-detail">
                                <div class="size"> <span>1118 sqft</span> </div>
                                <div class="bathrooms"> <span>2</span> </div>
                                <div class="bedrooms"> <span>3</span> </div>
                            </div>

                            <div class="property-info">
                                <div class="property-price"> <span> <span class="amount">&#36;299,000</span> </span> </div>
                                <div class="property-action"> <a href="property-details.html">More Details</a> </div>
                            </div>

                            <div class="property-info property-fullwidth-info">
                                <div class="property-price"> <span><span class="amount">&#36;299,000</span> </span> </div>
                                <div class="size"><span>1118 sqft</span> </div>
                                <div class="bathrooms"><span>2</span> </div>
                                <div class="bedrooms"><span>3</span> </div>
                            </div>
                        </div>
                    </div>

                    <div class="property-action property-fullwidth-action"> <a href="property-details.html">More Details</a> </div>
                </article>
                <!---------- Property End ----------> 
                <!---------- Property End ---------->
            </p>

            <div class="page_navigation"></div>

I need, due to how my css is, to show 2 of the above code snippet out of maybe 25. And here is my javascript that I am using:

<script>
var str= $(".storybody").html();
var substr=str.split( "<!--pagebreak-->" );
var txt="<ul class='storycontent'><li>";
var x=0;
for (x in substr)
  {
    if(x==0){
        txt=txt+substr[x];
    }
    else{
          txt=txt+"</li><li>"+substr[x];
    }
  }
var paginated=txt+"</li></ul>";
$('div.storybody').replaceWith(paginated);

$(document).ready(function(){
                $('#paging_container8').pajinate({
                    num_page_links_to_display : 2,
                    items_per_page : 1 ,
                    item_container_id : '.storycontent'
                });
            });
​</script>

And here is the jsfiddle: http://ift.tt/1Lrz04c