Using conditional within HTML

Question

I'm building some HTML within a javascript loop based on an object that has a few different attributes. The one I'm concerned with here is featured. Only a few elements have this set to 1, the rest are 0.

What I'm trying to achieve is to have the badge class and the title "Featured" added in a div on the elements where featured == 1.

I tried using this conditional operator within the html block but now my front-end just shows 50-60 divs with the featured badge even though I only have 2 that actually have featured set to 1, so I feel like the syntax may be wrong somewhere.

Basically, I want everything else in the HTML to show for every element, but I only want the div with class badges to show if featured == 1 on the element.

What am I doing wrong here?

stores.forEach(function (store, index) {
    var name = store.ttle;
    var url = store.link;
        var img = store.imgs;
        var link = store.link;
        var area = store.area;
        var featured = store.featured;
    
            storesHtml += `
                <div class="store-container" style="margin-bottom:15px;">
                  <div class="row">
                    <div class="col-lg-7">
                      <img class="img-fluid" src="${img}">
                    </div>
                    <div class="col-lg-5">`+(featured == 1)?`
                      <div style="" class="badges">
                        <div class="popularContainer">Featured</div>
                      </div>`:`<div></div>
                      <div class="name">
                        <a class="map-trigger" href="#">${area}</a>
                      </div>
                      <div><p style="font-size:10px;">${name}</p></div>

                    </div>
                  </div>
                </div>
                <hr>
            `
    
      });