How do you make the whole conclusion one function?

[elysha]

There's a violin that loads api mass and releases the information as a product at the store. There's a button of sorting where the processor hangs out, pulling off the adhesive list.

How do you make the whole conclusion one function? Because the same code is repeated three times.

The code looks like:

const marketURL = "https://fakestoreapi.com/products";
let stuff = await fetch(marketURL);

stuff = await stuff.json();
marketPlace.innerHTML = stuff.map(item =>          <div id="mainCard" class="card m-2 shadow p-3 mb-5 bg-white rounded">             <img src="${item.image}" class="mx-auto card-img-top" title="${item.title}">             <div class="card-body">                <h5 class="card-title text-center">${item.title}</h5>                <p class="card-text descript">${item.description}</p>                <h4 class="text-end">$${item.price}</h4>             </div>          </div>).join("");
lowerP.addEventListener("click", function(){

stuff.sort((a,b) => a.price > b.price ? 1 : -1);

marketPlace.innerHTML = stuff.map(item =>           <div id="mainCard" class="card m-2 shadow p-3 mb-5 bg-white rounded">             <img src="${item.image}" class="mx-auto card-img-top" title="${item.title}">             <div class="card-body">              <h5 class="card-title text-center">${item.title}</h5>              <p class="card-text descript">${item.description}</p>              <h4 class="text-end">$${item.price}</h4>             </div>           </div>).join("");

});
higherP.addEventListener("click", function(){

stuff.sort((a,b) => a.price < b.price ? 1 : -1);

marketPlace.innerHTML = stuff.map(item =>              &lt;div id="mainCard" class="card m-2 shadow p-3 mb-5 bg-white rounded"&gt;                &lt;img src="${item.image}" class="mx-auto card-img-top" title="${item.title}"&gt;                &lt;div class="card-body"&gt;                 &lt;h5 class="card-title text-center"&gt;${item.title}&lt;/h5&gt;                 &lt;p class="card-text descript"&gt;${item.description}&lt;/p&gt;                 &lt;h4 class="text-end"&gt;$${item.price}&lt;/h4&gt;                &lt;/div&gt;               &lt;/div&gt;).join("");

})

[meriah]

const marketURL = "https://fakestoreapi.com/products";

let stuff = await fetch(marketURL);
stuff = await stuff.json();

// Искомая функция
function printHtml() {
    marketPlace.innerHTML = stuff.map(item => `
         <div id="mainCard" class="card m-2 shadow p-3 mb-5 bg-white rounded">
            <img src="${item.image}" class="mx-auto card-img-top" title="${item.title}">
            <div class="card-body">
               <h5 class="card-title text-center">${item.title}</h5>
               <p class="card-text descript">${item.description}</p>
               <h4 class="text-end">$${item.price}</h4>
            </div>
         </div>
`).join("");
}
// Первый вывод
printHtml();

lowerP.addEventListener("click", function(){
    stuff.sort((a,b) => a.price > b.price ? 1 : -1);
    // Просто её вызываем
    printHtml();
});

higherP.addEventListener("click", function(){
    stuff.sort((a,b) => a.price < b.price ? 1 : -1);
    // Просто её вызываем
    printHtml();
})