How do I transfer a collection from ejs to a javascript function?

How do I transfer a collection from ejs to a javascript function ?

Current logic

• a collection of articles gets into view index.ejs from the database;
• in view index.ejs we make a list - <% articles.forEach((article, index) => { %>

Expected logic

• a collection of articles gets into view index.ejs from the database;
• in view index.ejs we make a list - <% articles.forEach((article, index) => { %>;
• the user clicks on the "tag " ;
• the JavaScript function accepts the parameters collection articles, id;
• JavaScript function:
• • gets an item of the article collection by id;
• • gets the content property of the article collection element .
• • the content property is displayed in the page element.

The ultimate goal: to display the content property in the page element. I try to implement it, I don't get a result.

Questions.
1. Did I make the code correctly?
2. How to make this decision correctly?

The current code. Briefly index.ejs. Tag-<a>

<a style="font-weight: bold;" href="#"><%=article.title%></a>

index.ejs. Fragment.

<!--  Arbitrary code ...  --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- -->
 <!-- LEFT MENU  --- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- -->
                        <div class="col-3 d-flex">
                            <aside class="bg-danger bg-gradient w-100 d-flex justify-content-left align-items-center text-dark fs-5">                                
                                <% if (articles.length > 0) { %>
                                    <ul>
                                        <% articles.forEach((article, index) => { %>
                                        <li>
                                            <input type="hidden" class="articles" name="articles[]" value="<%= article.id %>">     
                                            <span>
                                                <a style="font-weight: bold;" href="#"><%=article.title%></a>
                                            </span>    
 <!--  Arbitrary code ...  --- --- -- --- --- -- --- --- -- --- --- -- ---->

The expected code. Briefly
Tag <a>

<a style="font-weight: bold;" href="#" onclick="setMessage3('<%=articles%>', '<%=article.id%>')"><%=article.title%></a>

Tag <script>

<script>                
    function setMessage3(articles, id) {
    <!--  Arbitrary code ...  --- --- --- -->
    console.log(id);
    console.log(thisArticles[id].content);
    }
</script>
        

I click the <a> tag.
I get the result in the console.

Or solution-2. Immediately use the collection in JS.
Tag <script>

 <script>                
function setMessage4(id) {                    
    let thisArticles = '<%=articles%>';  
 
    console.log(thisArticles[id].content);
}
</script>

I click the <a> tag.
I get the result in the console.