I am trying to make html elements for each of the 6 ajax requests I am getting. I made a for loop for the json response object to get all of the objects, and I made a variable (let = output) set to a string of html that I want copies of for my json objects. I have a query selector choosing a div (main) I already made in my html, and I am setting it equal to output, the string of html containing my json objects in my for loop. But, when I set main equal to output, everything in my html breaks and nothing shows up. When I set main directly = to the string of html that I made containing the json objects, it appears, but its also copied 20+ times, I don’t know why this is happening but I think it has something to do with my for loop. I will greatly appreciate help with this problem.
Here is a link to my codepen with the issue