Is there a smarter and more important functioning way to display the products from my database in my shop in a way i can sort them later?

Question

I know it is bad practice to echo html code but I am a beginner and I haven't found a more suitable way. Also I can sort my items by just letting the user change the sql query which is kind of easy (and yes it also makes me vulnerable to sql injections) but I'd be open to completely new suggestions or tutorials you know. My goal is to show all 43 Items in my database on my website and let the user sort them. I would also get involved with javascript if that's needed.

edit - I am using a local xampp server.

<? php
    foreach($json as $row) {
        echo '<div class="col-lg-4">
                < div class="trainer-item" >
                    <div class="image-thumb" >
                        <img src = "assets/images/product-6-720x480.jpg" alt = "" >
                    </div >
                    <div class="down-content" >
                        <span >
                            <sup > $ </sup > '($row[' ProductPrice ']); '
                        </span >

                        <h4 > '.($row[' ProductName ']).' </h4 >
    
                        <p > Product description</p >
    
                        <ul class="social-icons" >
                            <li ><a href = "product-details.html" > +Order </a ></li >
                        </ul >
                    </div >
                </div >
            </div > ';

Answer 1

You can write a REST api to return JSON items from database and call it in UI asynchronously:

fetch(`http://RestApiUrl`)
        .then(function (response) {
            const json = response.json();
            for (row in json) {
                var div = document.createElement("div");
                div.setAttribute("class", "col-lg-4");

                var trainerItem = document.createElement("div");
                trainerItem.setAttribute("class", "trainer-item");

                var imageThumb = document.createElement("div");
                imageThumb.setAttribute("class", "image-thumb");

                var img = document.createElement("img");
                img.setAttribute("src", "assets/images/product-6-720x480.jpg");
                imageThumb.appendChild(img);

                var downContent = document.createElement("div");
                downContent.setAttribute("class", "down-content");

                var price = document.createElement("span");
                price.innerHTML  = `<sup>$</sup>${row.ProductPrice}`

                var name = document.createElement("h4");
                name.innerHTML  = row.ProductName
                downContent.appendChild(price);
                downContent.appendChild(name);

                trainerItem.appendChild(imageThumb);
                trainerItem.appendChild(downContent);

                div.appendChild(trainerItem);
            }
            /*Set the items to main div*/
            document.getElementById('main').innerHTML  = div;
        })

<div id="main" class="row"></div>