Create next previous button script in jQuery, HTML

HEAD

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
    .eventslider{height: 368px;overflow: hidden;}
</style>
<script type="text/javascript">
    $jq = jQuery.noConflict();
    $jq(function () {
        var $step = 2;
        $jq('.eventslider .event_detail_container').hide();
        for (i = 0; i < $step; i++) {
            $jq('.eventslider .event_detail_container').eq(i).show();
        }
        $jq('.previousvents').hide();
        $jq('.nextevents').click(function () {
            var length = $jq('.eventslider .event_detail_container').length;
            var $this = $jq(this);
            var $nextvalue = $this.attr('rel');
            if ($nextvalue < length) {
                $jq('.eventslider .event_detail_container').hide();
                var newnext = $nextvalue;
                for (i = $nextvalue; i < Number($nextvalue) + $step; i++) {
                    $jq('.eventslider .event_detail_container').eq(i).show();
                    newnext = i;
                }
                newnext = Number(newnext) + 1
                if (newnext < length) {
                    $this.attr('rel', newnext);
                    $jq('.previousvents').attr('rel', newnext);
                    $jq('.previousvents').show();
                } else {
                    $jq('.previousvents').show();
                    $jq('.previousvents').attr('rel', newnext);
                    $this.hide();
                }
            }
        });
        $jq('.previousvents').click(function () {
            var $this = $jq(this);
            var $previousvalue = $this.attr('rel');
            $previousvalue = $previousvalue - (Number($step) + 1);
            $jq('.eventslider .event_detail_container').hide();
            var newprevious = 0;
            for (i = $previousvalue; i > Number($previousvalue) - $step; i--) {
                $jq('.eventslider .event_detail_container').eq(i).show();
                newprevious = i;
            }
            newprevious = Number(newprevious) + Number($step);
            if (newprevious <= $step) {
                $this.hide();
                $jq('.nextevents').show();
                $jq('.nextevents').attr('rel', newprevious);
            } else {
                $this.attr('rel', newprevious);
                $jq('.nextevents').attr('rel', newprevious);
                $jq('.nextevents').show();
            }
        });
    });
</script>

Body

<div>
    <a href="javascript:void(0)" class="previousvents" rel="0">Previous</a>
    <div class="eventslider">
        <div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0 top">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Event 3</span>
                <h2><a itemprop="url" href="/test-event-3">Test Event 3</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-10-06" itemprop="startDate">October 06,  2016.</span><span content="2016-10-06" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Event  z</span>
                <h2><a itemprop="url" href="/test-event-z">Test Event  z</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-10-07" itemprop="startDate">October 07,  2016.</span><span content="2016-10-07" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Eventtt</span>
                <h2><a itemprop="url" href="/test-eventtt">Test Eventtt</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-10-27" itemprop="startDate">October 27,  2016.</span><span content="2016-10-27" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Evebt  sss</span>
                <h2><a itemprop="url" href="/test-evebt-sss">Test Evebt  sss</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-11-03" itemprop="startDate">November 03,  2016.</span><span content="2016-11-03" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">test event 22633</span>
                <h2><a itemprop="url" href="/test-event-2">test event 22633</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-08-12" itemprop="startDate">August 12,  2016.</span><span content="2016-08-12" itemprop="endDate">  </span> <span class="ohanah-time">4:00 am</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Event 4</span>
                <h2><a itemprop="url" href="/test-event-4">Test Event 4</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-09-08" itemprop="startDate">September 08,  2016.</span><span content="2016-09-08" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">


            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Event 9999</span>
                <h2><a itemprop="url" href="/test-event-9999">Test Event 9999</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-09-08" itemprop="startDate">September 08,  2016.</span><span content="2016-09-08" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">


            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">test event</span>
                <h2><a itemprop="url" href="/test-event">test event</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-10-04" itemprop="startDate">October 04,  2016.</span><span content="2016-10-04" itemprop="endDate">  </span> <span class="ohanah-time">4:00 am</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Event 00011</span>
                <h2><a itemprop="url" href="/test-event-00011">Test Event 00011</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-10-04" itemprop="startDate">October 04,  2016.</span><span content="2016-10-04" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div><div itemtype="http://schema.org/Event" itemscope="" class="event_detail_container   cat-3 venue-0">
            <div class="event_detail_title">
                <span style="display:none;" itemprop="name">Test Event ZZXaaaa</span>
                <h2><a itemprop="url" href="/test-event-zzxaaaa">Test Event ZZXaaaa</a></h2>
            </div>
            <div class="event_detail_time" style="display:inline">
                <div class="date_icon"></div>
                <h3 style="display:inline">
                    <span content="2016-10-05" itemprop="startDate">October 05,  2016.</span><span content="2016-10-05" itemprop="endDate">  </span> <span class="ohanah-time">5:00 pm</span>  <span class="ohanah-time"></span> </h3>
            </div>
            <div class="event-spacer"><br><br></div>
            <div id="event-container-info">
                <span class="ohanah-registration-link" style="float: right; padding-left:12px">
                </span>
            </div>
            <div class="event-spacer"><br><br></div>
        </div>
    </div>
    <a href="javascript:void(0)" class="nextevents" rel="2">Next</a>

</div>