JavaScript-JQuery: Inserting chain of HTMLs with JQuery

const cloneSymbols = […gameSymbols, …gameSymbols];
const boardCards = shuffleArray(cloneSymbols);
for (let i = 0; i < boardCards.length; i++) {
$(‘board’).append($(“

”).append($(“
”)).append($(“<i class='bi bi-” + {boardCards[i]} + ’ “”))
}

Above are my codes. boardCards are strings.
Currently facing the problem of not being able to generate the chain of HTMLs to append to the ‘.board’, with the string from the boardCards array;
Appreciate if anyone could advise and/or share new methods that can help. Many thanks!

Can you post your full code, so we can test it and see what is happening, since you did not explain what you are expecting vs. what is actually happening?

Why are you appending to strings filled with whitespace before the last append?

Lastly, why do you spread the same array twice to add to a new array (see below)?