JSFiddle - React, Tailwind, and code Playground

HTML

<iframe id="iframe" style="width:100%">
    
</iframe>
    <button class="md-back">Back</button>
        <button id="google">Google</button>
<button id="yahoo">yahoo</button>

JavaScript

var urlList = new Array();
    var pos = 0;
    function goToPage(pageUrl)
    {
        urlList[urlList.length] = pageUrl;
        pos = urlList.length - 1;
        document.getElementById('iframe').src = pageUrl;
    }
    function goBack()
    {
        if (pos > 0)
        {
            pos--;
            document.getElementById('iframe').src = urlList[pos];
        }
        else
            alert('You reached the first page of history');
 
    }
    function goForward()
    {
        if (pos < (urlList.length-1))
        {
            pos++;
            document.getElementById('iframe').src = urlList[pos];
        }
        else
            alert('You reached the last page of history');
    }

$(".md-back").on("click" ,function(){
        goBack();
    });

$("#google").on("click", function(){
   goToPage('www.google.com'); 
});


$("#yahoo").on("click", function(){
   goToPage('www.yahoo.com'); 
});