JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button id="the-link-2">click me</button>

CSS

form * {
    display: block;
}

.message:nth-child(odd) {
    background: #939393;
    color: white;
}

.message:nth-child(even) {
    background: #6e6e6e;
    color: white;
}

.btn-container * {
    display: inline-block;
    margin: 10px;
}

JavaScript

var array = ["test1", "test2", "test3", "test4"];

$('#the-link-2').click(function() {
    var current = 0;
    createDialog(array[current], current);
});

function createDialog(data, current) {
    var $div = $('<div>');
    $div.html(data).dialog({
        buttons: {
            'Previous': function() {
                if (current == 0) {
                    return;
                } else {
                    current--;
                }
                $(this).dialog("close").remove();
                createDialog(array[current], current);
            },
            'Next': function() {
                if (current == (array.length - 1)) {
                    return;
                } else {
                    current++;
                }
                $(this).dialog("close").remove();
                createDialog(array[current], current);
            }
        }
    });
}