Best way to add dynamic features into an html website without a CMS or php?

I'm in charge of a large-ish company website that's built entirely on .html/css and is likely going to stay that way for a while. I'd love to build in some dynamic functionality in the following ways...

1.) Four of our pages have a "Featured Reports" section that show the three most recent reports we've published along with a synopsis. It would be great if this could be drawn from a master list.

2.) Similarly those four pages each link to a page that has the full list of every report published within that category. If possible I'd like to populate this page from the same master list.

The idea is that the master list, either one for all four categories or four lists, can be updated, either in html or plain or rich text and both the featured reports and full reports sections can be updated automatically. Is this something I can do with xml? Is there another option? I'm looking to avoid using a CMS or any sort of database- just a list that's manually updated periodically.

1. I'm going to assume you have these reports accessible via a URL, like "http://yoursite.com/reports/report1" or something. I'm also going to assume what your question was getting at, but didn't specifically state, that this featured reports list is code that should be reusable. Here's how I'd do that (assuming also that since you tagged jquery in your question, you can use jquery on the site):

const reports = [
  {name:"Report 1", url:"https://yoursite.com/reports/reports1"},
  {name:"Report 2", url:"https://yoursite.com/reports/reports2"},
  {name:"Report 3", url:"https://yoursite.com/reports/reports3"}
]
$(document).ready(function(){
  $('#reports').html(reports.map(report => `
    <button onclick='alert("${report.url}")'>${report.name}</button>
  `))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="reports"></div>