Dynamic List with jquery json data

How to append below condition to id = #sellerMetal <ul> container,
it is a dynamic loop list
if dataJS
productList > medals > goldmedal = true,
append <li class="icon"><img src="/img/goldmetal.png"></li>

if dataJS
productList.medals.silvermedal = true,
append <li class="icon"><img src="/img/silvermedal.png"></li>

if dataJS
productList > medals > newshop= true,
append <li class="icon"><img src="/img/newshop.png"></li>
...
...
...
...
...

Hope someone can help me, this is a list of product Thank you very much

Below is the Render List of Product List Append

expected result:

<div id="List">
<div class="feature_ico">
    <ul id="#sellerMetal" class="icons">
        (Apend to here)
    </ul>
</div>
<div class="feature_ico">
    <ul id="#sellerMetal" class="icons">
        (Apend to here)
    </ul>
</div>
<div class="feature_ico">
    <ul id="#sellerMetal" class="icons">
        (Apend to here)
    </ul>
</div>
<div class="feature_ico">
    <ul id="#sellerMetal" class="icons">
        (Apend to here)
    </ul>
</div>

Below is example snippet......
below is the code that i have tried:
comment //Condition is here i have tried is the condition i put it, it doesn't work like expected.

//Below is the Data JS
var data = { productList: [
    {
        id: "e0c18c12-0b51-41ad-9f2c-aefc20cafcdb",
        link: "1",
        imgurl: "img001",
        text: 'Product 001',
        seo: '',
        medals: [{
            goldmedal: true,
            sellermedal: false,
            newshop: true
            }]
    },
    {
        id: "f3bee385-76d7-4a87-8bba-a51d33238858",
        link: "2",
        imgurl: "img002",
        text: 'Product 002',
        seo: '',
        medals: [{
            goldmedal: true,
            sellermedal: true,
            newshop: true
            }]
    },
    {
        id: "fc3dd6a9-5d8c-4262-aa65-a680e0f0cafe",
        link: "3",
        imgurl: "img003",
        text: 'Product 003',
        seo: '',
        medals: [{
            goldmedal: false,
            sellermedal: false,
            newshop: true
            }]
    },
    {
        id: "8615711e-8544-4484-933f-b14a93941b86",
        link: "4",
        imgurl: "img004",
        text: 'Product 004',
        seo: '',
        medals: [{
            goldmedal: false,
            sellermedal: false,
            newshop: true
            }]
    }]
};

$(function () {
    const getProductList = function (productItem) {
        const productListRender = $('<div>', { class: 'feature_ico'}).append($('<ul>', {
            id: plSettings.sellerMetal,
            class: 'icons'
        }));

        //Condition is here i have tried
        if (productItem.medals) {
            $.each(productItem.medals, function (index, data) {
                if (this.goldmedal === true) {
                    const medalRender = $(plSettings.sellerMetal);
                    const metalItem = $('<li>', {
                        class: 'icon gold'
                    }).append($('img'), {
                        src: ''
                    });
                    medalRender.append(metalItem);
                } else if (this.silvermedal === true) {
                    const medalRender = $(plSettings.sellerMetal);
                    const metalItem = $('<li>', {
                        class: 'icon gold'
                    }).append($('img'), {
                        src: ''
                    });
                    medalRender.append(metalItem);
                    }
                });
            }
            return productListRender;
        };

    const $product = $('#List')
    $.each(data.productList, function (index, data) {
        $product.append(getProductList(data));
    });
});

//Below is the Setting JS
var plSettings = $.extend({
    sellerMetal: '#' + 'sellerMetal',
    goldMetalSrc: '/img/tps/gold.png'
});

.feature_ico {
    border: 1px solid #e0e0e0
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="List"></div>