JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="bbb" data-id="#qTest.Image_ID#" value="#qTest.Account#" /><br />
<br />
<img id="theImage" class="hide" src="http://placehold.it/150x150" ><br>
<div id="theDescription" class="hide" ></div>
<div id="msgbox">
    <p>Please enter any additional comments:</p>
    <textarea id="ta" rows="5" cols="30"></textarea>
</div>

CSS

* {font-size:10px;} //for default dialog font/button size
.hide{display:none;}
#bbb{font-size:12px;}
textarea{}
#theDescription{font-size:16px;}
#msgbox{font-size:16px;}
#msgbox p{font-size:12px;}
#msgbox textarea{font-size:12px;}

JavaScript

$('#msgbox').dialog({
    autoOpen:false,
    modal:true,
    title: 'Add Comments',
    buttons: {
        Okay: function() {
            var oldComments = $("#theDescription").html();
            var newComments = $('#ta').val();
            $("#theDescription").html(oldComments +'<br />' + newComments);
            
            //Do your ajax update here:
            /*
            $.ajax({
                //Unsure of cfc syntax
            });
            */
            $(this).dialog('close');
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    },
    close: function() {
        alert('AJAX update completed');
    }
});

$("#bbb").click(function (event) {
    event.preventDefault();
    var id = $(this).data("id");
    
    var src = 'http://placehold.it/150x150';
    var desc = 'This is the first bit of remarks';
    
    $("#theImage").attr("src", src).removeClass("hide");
    $("#theDescription").html(desc).removeClass("hide");
    
    $('#msgbox').dialog('open');
});