How to modify duplicate elements in html preprocessors?

Question

HTML

Hello!
Example: when developing an online store, you need to put a stub in the form of a list of goods (literally three items in 10 rows). In order not to pile up the code, we use the html preprocessor and create a product card template. This template is output by a loop built into the preprocessor, since html tag structure for each product card is repeated, but the name, price, src of the image are different.
1) But how to output these differences through a loop?
2) What if there is a product card (let's say the second in the seventh row), which, in addition to the main html markup, has some labels in the form of NEW, TOP RATED, etc. - how to write this data into the output loop?
That is, roughly speaking, there is a card template:

<div class="item">
    <div class="item_img">
        <img src="path/to/img" alt="alt">
    </div>
    <h3 class="item_title">Product title</h3>
    <p class="item_price">100$</p>
    <p class="item_text">Lorem ipsum dolor sit amet.</p>
</div>

But there are cards whose template is slightly different, let's say the second picture in the seventh row has a NEW label:

<div class="item">
    <div class="item_img">
        <img src="path/to/img" alt="alt">
        <div class="item_label">NEW</div>
    </div>
    <h3 class="item_title">Product title</h3>
    <p class="item_price">100$</p>
    <p class="item_text">Lorem ipsum dolor sit amet.</p>
</div>

Here's how to stir it all up in one cycle?

Answer 1

in jade, I would create a mixin that displays the product, and as an argument, I would pass the number of blocks to be created.
The text that should be contained in product blocks can be described in a json file.
NEW, TOP RATED pass as arguments.