Button with <i> making table row disappear

Question

I am using the template Gentelella Alela but seem to have a tiny problem. I am using a table to display products from a database table. Each row has a button to load up a new page to edit that specific product.

This is working correctly, however when I press on the button. That row in the table disappears (The row comes back as normal when I return back to the page). I have narrowed it down that the problem is the <i> tag as when I remove the button and keep the <i>, the rows are disappearing.

I am unsure on how to fix this, does anyone have any suggestions? I haven't added any custom scripts or css to the template. This is the current code on the table. If anything else is required, I will try to help.

<table id="datatable-buttons" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>SKU</th>
      <th>Product Description</th>
      <th>Alternative Code (Barcode)</th>
      <th>#Edit</th>
    </tr>
  </thead>

  <tbody>
    <?php foreach ($products as $product): ?>
      <tr>
        <th scope="row"><?php echo $product->ProdCode; ?></th>
        <td><?php echo $product->Description; ?></td>
        <td><?php echo $product->AlternativeCode; ?></td>
        <td>
          <form id="view_product_form" class="form-horizontal form-label-left" method="post" action="<?php echo base_url('main/view_product')?>" novalidate>
            <input type="hidden" name="sku" class="form-control col-md-7 col-xs-12" value="<?php echo $product->ProdCode;?>">
            <center><button type="submit" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i></button></center>
          </form>
        </td>
      </tr>
    <?php endforeach; ?>
  </tbody>
</table>