<div class="row">
    <div class="col-lg-12">
        <table class="table table-striped table-bordered table-hover dataTableClass">
            <thead>
                <tr>
                    <th>السيريال</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <!-- Serial data will be loaded here via AJAX -->
                 {assign var="i" value=1}
                {foreach $productSerials as $ser}
                <tr>
                    <td>{$ser.serialnumber}</td>
                    <td>
                        <input type="button" class="btn btn-danger delSerial" data-itr="{$i}" data-id="{$ser.productserailid}" value="حذف" />
                    </td>
                </tr>
                 {assign var="i" value={$i+1}}
                {/foreach}
                {for $k = 1; $k <= {$qty - count($productSerials)}; $k++}
                <tr>
                    <td><input type="text" id="serialnumber" class="proSerialNo"/></td>
                </tr>
                {/for}
            </tbody>
        </table>
    </div>
</div>