I'm trying to implement a simple paginate but I'm falling at the last hurdle! I'm using http://botmonster.com/jquery-bootpag/#.Ua3glthYBI0

My code is thus;

Code:
<div class="box-250">
    <h2><span>News</span></h2>

    <div id="content-p">
        <div class="news-item small" id="newsitem-antrim-youth-fair">
            <div>
                 <h3>The Antrim Youth Fair 1</h3>

                <p><span>April 2013</span>
                </p>
                <p>The Antrim Youth Fair is taking place on Wednesday 1st May 2011 from 9.30am – 3.30pm at Parkhall Integrated College – Senior School &nbsp; [<a href="http://goo.gl/maps/G75NK" style="color:#0000FF;text-align:left">Directions</a>]</p> <a href="publications/locality-groups/antrim/antrim_youth_fair_flyer.pdf"
                target="_blank">See flyer here</a>
                </p>
            </div>
        </div>
        <div class="news-item small" id="newsitem-antrim-youth-fair">
            <div>
                 <h3>The Antrim Youth Fair 1</h3>

                <p><span>April 2013</span>
                </p>
                <p>The Antrim Youth Fair is taking place on Wednesday 1st May 2011 from 9.30am – 3.30pm at Parkhall Integrated College – Senior School &nbsp; [<a href="http://goo.gl/maps/G75NK" style="color:#0000FF;text-align:left">Directions</a>]</p> <a href="publications/locality-groups/antrim/antrim_youth_fair_flyer.pdf"
                target="_blank">See flyer here</a>
                </p>
            </div>
        </div>
        <div class="news-item small" id="newsitem-antrim-youth-fair">
            <div>
                 <h3>The Antrim Youth Fair 1</h3>

                <p><span>April 2013</span>
                </p>
                <p>The Antrim Youth Fair is taking place on Wednesday 1st May 2011 from 9.30am – 3.30pm at Parkhall Integrated College – Senior School &nbsp; [<a href="http://goo.gl/maps/G75NK" style="color:#0000FF;text-align:left">Directions</a>]</p> <a href="publications/locality-groups/antrim/antrim_youth_fair_flyer.pdf"
                target="_blank">See flyer here</a>
                </p>
            </div>
        </div>
        <div class="news-item small" id="newsitem-antrim-youth-fair">
            <div>
                 <h3>The Antrim Youth Fair 1</h3>

                <p><span>April 2013</span>
                </p>
                <p>The Antrim Youth Fair is taking place on Wednesday 1st May 2011 from 9.30am – 3.30pm at Parkhall Integrated College – Senior School &nbsp; [<a href="http://goo.gl/maps/G75NK" style="color:#0000FF;text-align:left">Directions</a>]</p> <a href="publications/locality-groups/antrim/antrim_youth_fair_flyer.pdf"
                target="_blank">See flyer here</a>
                </p>
            </div>
        </div>
        <div class="news-item small last" id="newsitem-antrim-youth-fair">
            <div>
                 <h3>The Antrim Youth Fair 1</h3>

                <p><span>April 2013</span>
                </p>
                <p>The Antrim Youth Fair is taking place on Wednesday 1st May 2011 from 9.30am – 3.30pm at Parkhall Integrated College – Senior School &nbsp; [<a href="http://goo.gl/maps/G75NK" style="color:#0000FF;text-align:left">Directions</a>]</p> <a href="publications/locality-groups/antrim/antrim_youth_fair_flyer.pdf"
                target="_blank">See flyer here</a>
                </p>
            </div>
        </div>
    </div>
    <div id="page-selection">Pagination goes here</div>
</div>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.js"></script>
<script>
    // init bootpag
    $('#page-selection').bootpag({
            total: 3
        }).on("page", function (event, /* page number here */ num) {
            $("#content-p").html("Insert content"); // some ajax content loading...
        });
</script>