JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
    </head>
    <body>

        <button type = "submit" name = "submit_prev" onClick = "prevPage()"> &lt;&lt; </button>
        <button type = "submit" name = "submit_next" onClick = "nextPage()"> &gt;&gt; </button>
    <br/>
       
    <div id="content"></div>

    <script type="text/javascript">document.write("<img id = 'DiaryImage' src = 'image_1.jpg' width='370' height='790' name ='Dunford'/>"); </script>    
        
    </body>
</html>

JavaScript

var diary_1938 = {
        
            'page_1': {
            'date_0': '1st Jan','entry_0': 'This is the first line',
            'date_1': '2nd Jan','entry_1': 'This is the second line',
            'date_2': '4th Jan','entry_2': 'This is the third line',
            'img': 'image_1.jpg'},
            'page_2':  {
            'date_0': '12th Jan','entry_0': 'This is the first line',
            'date_1': '13th Jan','entry_1': 'This is the second line',
            'date_2': '14th Jan','entry_2': 'This is the third line',
            'img': 'image_2.jpg'},
           };
        
            var counter = 1;
            var pageRef = "page_"+counter;
        
            function populatePageFromJson(JSONobject){
            var divElement=document.getElementById("content");
                divElement.innerHTML=JSONobject[pageRef].date_0+"<br/>"+ 
                                 JSONobject[pageRef].entry_0+"<br/><br/>"+
                                 JSONobject[pageRef].date_1+"<br/>"+ 
                                 JSONobject[pageRef].entry_1+"<br/><br/>"+
                                 JSONobject[pageRef].date_2+"<br/>"+ 
                                 JSONobject[pageRef].entry_2+"<br/><br/>"
            }
            
            function nextPage() {
              counter++
              pageRef = "page_"+counter;
              document.getElementById("DiaryImage").src = "image_"+counter+".jpg";
              populatePageFromJson(diary_1938);
            }
        
            function prevPage() {
              counter--
              pageRef = "page_"+counter;
              document.getElementById("DiaryImage").src = "image_"+counter+".jpg";
              populatePageFromJson(diary_1938);
            }
                        
            
            window.onload= function() {       
                populatePageFromJson(diary_1938);
            }