Convert html to Image and Download

[Shokkato]

I would like to convert every message that is received into an image, and with the download button download it. every post is different

This is what I get in html, each message should have its own download button

This is my .js code

// fetch Messages
           function fetchData() {
            $('#displayMessages').html('<div class="alert alert-info">We are looking for your messages!...</div>');
            $('#messages').click();
             $.ajax({
              url: 'controller/fetch_comments.php',

              //success
               success: function(data){

         if (data=='please login') {
          window.location='./';
          console.log(data);
         }
         else{

          var $fetch ='';
          var component ='';


        
          if (/^[\],:{}\s]*$/.test(data.replace(/\\["\\\/bfnrtu]/g, '@').
replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']').
replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
            data=JSON.parse(data);
          console.log(data);

           $.each(data, function(i, fetchAll){
            var fetchData= data[i];
            let message_title = fetchData.message_title ?? ""
  $fetch += '<div class="row m-0"> <div class="pull-left alert col-md-2 mb-0"><img src="assets/img/anon.jpg" style=" width: 50px; height: 50px;  border-radius:50%; box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3); border: 5px solid #2c2c2c;" class="m-0"></div> <div class="alert col-md-7 m-0" style="margin-left:0px; color:#2c2c2c;"> <b>'  +message_title +'</b><br>'  +fetchData.description
         +'</div> <div class="col-md-3 alert pull-right m-0"><span style="color: black;" class="fa fa-clock m-0"></span><br><text style="color: black; font-size:10px;"> ';
         $fetch+=fetchData.date_created+'</text></div></div>';

        });

          } else {

            $fetch +='<div class="alert alert-danger">No messages yet.😒</div>';
          console.log(fetch);
          $('#displayMessages').html($fetch)
         }

        $('#displayMessages').html($fetch);
             }

           }

           });

}

this is the php code

$usersObj = new Comments();

$logsObj = new Logs();



    $id = isset($_SESSION['user_id']) ? $_SESSION['user_id'] : 1;

    if (empty($id)) {

        exit();

    }



    if ($allComments = $usersObj ->FETCH_COMMENTS($id)) {

        $logDescription = 'data fetched!';

        $logsObj->INSERT_LOG($id, $logDescription);



    }else{

        echo 'log failed';



    }

   echo isset($allComments) ? json_encode($allComments) : 'nothing found';$usersObj = new Comments();

$logsObj = new Logs();



    $id = isset($_SESSION['user_id']) ? $_SESSION['user_id'] : 1;

    if (empty($id)) {

        exit();

    }



    if ($allComments = $usersObj ->FETCH_COMMENTS($id)) {

        $logDescription = 'data fetched!';

        $logsObj->INSERT_LOG($id, $logDescription);



    }else{

        echo 'log failed';



    }

   echo isset($allComments) ? json_encode($allComments) : 'nothing found';

This is my html in my dashboard, is used to show the message

<div class="tab-pane active" id="home" role="tabpanel">



                      <div id="displayMessages">
                      </div>

                      


                    </div>

thanks to whoever can help me