How to have a link that has a product id in it

I am trying to make a link in a javascript render function that will come out like this on my website:

example.com/product/( product id number )

I have all my product information inside an array in a data.js file that is being accessed as for the product name that is rendering correctly buy I can’t find how to make a link like shown above that changes for everyproduct (I will have 100+ products so I don’t want to manually change it every time for a new product), but i cant find a way to do this, I have tried:

<a href='product/:_id'>
<a href='product/{product._id}'>

but none of these seem to work

>Solution :

I would suggest you to use Template literals and you are all the right track, just chance the ".

let id;
let a = document.querySelectorAll('a')
a.forEach(item=>{
item.href = `product/{id}`
id+=1
})
console.log(a)

<a ></a>
<a ></a>