JSFiddle - React, Tailwind, and code Playground

by Olavxxx

HTML

<div id="new34" style=" width:1028px; height:15px; background#fff; float:left;">
    <div class="navContainer"> <a class="nav" id="navP" data-go="minus">&lt;</a>
 <a class="nav" id="navN" data-go="plus">&gt;</a>

    </div>
</div>

CSS

.navContainer {
}
a.nav {
    cursor:pointer;
    border: 1px solid whitesmoke;
    padding: .2em;
    margin: .2em;
    float: left;
}

JavaScript

$(document).ready(function () { // Handler for .ready() called.
    var intPage = 0; // variable for initial page number

    // trigger for next/prev

    $("a[class=nav]").click(function (e) {

        // console.log(this, event.target);

        switch ($(this).attr("data-go")) {
            case "minus":
                if (intPage >= 1) intPage--;
                getBusinesses(intPage);
                break;
            default:
                intPage++;
                getBusinesses(intPage);
        }
        console.log(intPage);
    });

    function getBusinesses(page) {
        $.ajax({
            type: "POST",
            url: "getbusiness.php",
            data: "page=" + page,
            success: function (msg) {
                $("#new2").ajaxComplete(function (event, request, settings) {
                    $("#new2").html(msg);
                });
            }
        });
    }

});