New Buying Screen: Liquid.js + JSON

buying-screen.html

<!-- the template for each product row in the buying table written in liquid.js -->
<script type="text/template" id="row-template">
    <tr class="product {{ product.id }} on-order category-{{ product.category_id }}" search="{{ product.name | downcase }}" search_var="{{ product.variant | downcase }}" data-category-id="{{ product.category_id }}" data-supplier-id="{{ product.orders[0].supplier_id }}">
        <td>
            <div class="circle-thumb pull-left">                               
                <div class="order-thumbnail text-center">{{ product.name[0] | capitalize }}</div>
            </div>  
            <div class="prod-details" style="margin-left:50px; line-height:2.35;">
                <div class="item-name">{{ product.name }}
                    {% if (product.variant) %}
                        <div class="item-variant"> - {{ product.variant }}</div>
                    {% endif %} 
                </div>
            </div>
        </td>
        <td>
            --
        </td>
        <td>
            --
        </td>
        <td>
            <select name="buying-supplier[{{$product->id}}][{{$dd}}]" id="buying-supplier[{{$product->id}}][{{$dd}}]" class="form-control buying-supplier">
                <option value="">Choose Supplier...</option>
                {% foreach suppliers in supplier %}
                    <option value="{{ supplier.id }}" {% if supplier.id == p.supplier.id %}selected{% endif %}>{{ supplier.name }}</option>
                {% endforeach %}
            </select>
        </td>
    </tr>  
</script>

<!-- json data from the app -->
<!-- use something like json_encode([]) -->
<script>
    window.buying_data = <?= json_encode([
        'suppliers' => $suppliers,
        'products'  => $products
    ]); ?>;
</script>

<!-- the table your products are listing in -->
<table id="table-wrapper"></table>

<!-- include the liquid.js library -->
<script src="https://unpkg.com/liquidjs/dist/liquid.min.js"></script>
<script>
    $(document).ready(function(){

        // this code matches the data with the template,
        // renders it,
        // then appends it to the table

        var template = $('#row-template').html(), // this is just loading the template string
            $table_wrapper = $('#table-wrapper'), // this is the jquery reference to the table we'll append to
            liquid = new Liquid(); // this is a reference to the liquid engine

        // we need to build the data object for this specific row
        data = {
            'product'   : {}, // <<<<< you'd need to pass this into the function somehow like
            'suppliers' : window.buying_data.stores,
        };

        // first we parse and render the template
        liquid.parseAndRender(template, data)
            // then append the resulting HTML to the table wrapper
            .then(function(html){ $table_wrapper.append($(html)); });
    });
</script>