UPDATED

We need to assign unique id to data elements. For example: id="${id}-author". Note that id is from your card id

<div class="col-lg-3 col-md-4 col-sm-6 mt-3" onclick="show(${id})" id="card">
            <div class="card p-1">
                <img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image"
                    class="bookimg" width="150" height="200">
                <h6 class="mb-3 booktitle" id="${id}-booktitle">${title1}</h6>
                <p class="mb-0 bookpara" name="author" id="${id}-author">Author : ${author1}</p>
                <p class="mb-3 bookpara" name="pages" id="${id}-pages">Pages : ${pages1}</p>
                <a href="${downloadLinks}" class="reportbtn">Download1</a>
            </div>
</div>

After that, we can implement show function like below

function show(id) {
   const author = document.getElementById(id + "-author").innerHTML;
   const booktitle = document.getElementById(id + "-booktitle").innerHTML;
   const pages = document.getElementById(id + "-pages").innerHTML;
   console.log({ author, booktitle, pages })
}

If you don’t want to modify HTML, you also can try this way

onclick="show({ author: ${author}, booktitle: ${booktitle}, pages: ${pages} })"

And you need to have params corresponding to your data name

function show({ author, booktitle, pages }) {
   console.log({ author, booktitle, pages })
}

OLD ANSWER

onclick="show(this)"

this in this context is referred to the global one, but from my understanding of your question, you’re trying to get scoped context, so the change could be

onclick="show(event)"

To access the innerHTML from that click, you can try this way

function show(event) { //the param needs to be passed properly
   var currentElement = event.target || event.srcElement;
   var details = currentElement.innerHTML
   console.log(details)
}

P/s: If you want to keep the global context on this, you also need to pass the param on show function.

@ Nick Vu thanks for your comment your approach is quite logical and great well what i have did is, I have assigned a unique id to every card div while calling API and then target its childnode’s innerHTMLS.

HTML

 <div class="col-lg-3 col-md-4 col-sm-6 mt-3" id="card">
            <div class="card p-1" id="second" onclick="show(id)">
                <img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image"
                    class="bookimg" width="150" height="200">
                <h6 class="mb-3 booktitle">${title2}</h6>
                <p class="mb-0 bookpara" name="author">Author : ${author2}</p>
                <p class="mb-3 bookpara" name="pages">Pages : ${pages2}</p>
                <a href="${downloadLinks}" class="reportbtn">Download2</a>
            </div>
        </div>
    </div>

javascript

function show(e) {
console.log(e)
var details = document.getElementById(e)
console.log(details)
console.log(details.childNodes[1].src)
console.log(details.childNodes[3].innerHTML)
console.log(details.childNodes[5].innerHTML)
console.log(details.childNodes[7].innerHTML)

}

this is working around what i want as output.. thanks. Or may be at last i can do forEach loop of childnodes to make it more short.

I am creating various cards using fetch API, this cards are holding details like (Author, Title, Cover Image, etc.).

There is a lot of cards renders there once API call my struggle is how to get specific card data/details like ( author, title etc.) of clicked card. when user clicked any of the card from these set.

HTML

        <div class="row" id="ShowReports">
        <div class="col-lg-3 col-md-4 col-sm-6 mt-3" onclick="show(this)" id="card">
            <div class="card p-1">
                <img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image"
                    class="bookimg" width="150" height="200">
                <h6 class="mb-3 booktitle">${title1}</h6>
                <p class="mb-0 bookpara" name="author">Author : ${author1}</p>
                <p class="mb-3 bookpara" name="pages">Pages : ${pages1}</p>
                <a href="${downloadLinks}" class="reportbtn">Download1</a>
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 mt-3" onclick="show(this)" id="card">
            <div class="card p-1">
                <img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image"
                    class="bookimg" width="150" height="200">
                <h6 class="mb-3 booktitle">${title2}</h6>
                <p class="mb-0 bookpara" name="author">Author : ${author2}</p>
                <p class="mb-3 bookpara" name="pages">Pages : ${pages2}</p>
                <a href="${downloadLinks}" class="reportbtn">Download2</a>
            </div>
        </div>
    </div>

javaScript

function show() {
var details = this.innerHTML
console.log(details)

}

Don’t know what is the right approach or method to this…