I've run into this issue a few times before as well.

First, I would suggest using jquery anyway. When writing plain html, I almost always use jquery. It makes interaction with the DOM much easier. So here is an example in jquery of the onClick event for an element with id="card-button". A normal click event won't work from jquery here. You have to set it on the document and then further set a selector:

fetch('https://jsonplaceholder.typicode.com/users')
.then(res=>res.json())
.then(data=>show(data))

function show(data){
 const cardsContainer = $('#cards-container');
 cardsContainer.html("");
 data.map(element => {
    cardsContainer.append(`
    <div class='card p-5 m-1 col-md-4'>
        <h3>${element.name}</h3>
        <h5>${element.email}</h3>
        <button class="btn btn-primary" id='card-button'>Add to Card</button>
    </div>
    `
});
}

$(document).on("click", "#card-button", function(e) {
    setLocalStorage(e)

    // or you can just place the contents of setLocalStorage directly 
    // into here! 
})

function setLocalStorage(e){
 console.log("clicked",e)
}

you can remove onClick from the button element here. Make sure you remember to import jquery. Ideally the minified version.

BUT YOU HAVE ANOTHER MORE IMPORTANT ISSUE

you're creating multiple add card buttons with the same id (card-button). you need to set card-button as a class. This way it can be applied multiple elements. I would suggest adding an ID to the button or cardDiv that is associated with userID, Index or any other unique identifier. This way you can recognize which user or card button is actually being pressed, and take action accordingly. Here is the updated jQuery with class instead of ID

fetch('https://jsonplaceholder.typicode.com/users')
.then(res=>res.json())
.then(data=>show(data))

function show(data){
 const cardsContainer = $('#cards-container');
 cardsContainer.html("");
 data.map(element => {
    cardsContainer.append(`
    <div class='card p-5 m-1 col-md-4'>
        <h3>${element.name}</h3>
        <h5>${element.email}</h3>
        <button class="btn btn-primary" class="card-button" id='some-unique-id'>Add to Card</button>
    </div>
    `
});
}

$(document).on("click", ".card-button", function(e) {
    setLocalStorage(e)

    // or you can just place the contents of setLocalStorage directly into here! 

    // Here you can grab the jquery object with $(this), or use the 
    // ID with e.target.id with the e.target.id, etc...
    clickedButton = $(this);
    clickedButtonID = e.target.id;
})

function setLocalStorage(e){
 console.log("clicked",e)
}

I don't use plain HTML without jQuery often, so I can't answer for sure if you want to take that route. It seems as if this previous thread answers that question, definitely better than I could.

unable to use getElementById on HTML element not yet appended to document

Best of luck!!