<div style="display: none;">
    <div id="freeDishOfferItem">
        <div class="popup-info-block">
            <div class="popup-container">
                <div class="text-capitalize text-center popup-title" id="freeDishPopupTitle"></div>
            </div>
        </div>
        <div class="popup-container">
            <div class="popup-content-area" id="freeDishPopupContentHolder"></div>
        </div>
    </div>
</div>
<script>
    function freeDishOfferItemControllerPopup(freeDishOffer) {
        $('#freeDishPopupTitle').text('choose your free ' + freeDishOffer.qty + ' ' + freeDishOffer.title);
        var freeItemHtml = '';
        freeDishOffer.items.forEach(function (item) {
            freeItemHtml += `<div class="tab-item free-dish-tab" onclick="addToCart('` + item.category + `','` + item.menu + `','` + item.selection + `','yes')">` + item.itemName + `</div>`;
        });
        $('#freeDishPopupContentHolder').html(freeItemHtml);
        $.colorbox({inline: true, scrolling: false, href: "#freeDishOfferItem", width: '460px', height: 'auto', maxWidth: "100%", top: 0, open: true, closeButton: true, transition: 'none', overlayClose: false, className: 'transparent-overlay',
            onOpen: function () {

            },
            onClosed: function () {

            }
        });
    }
</script>