Apply bootstrap Datatable plugin to GridView using jQuery in ASP.Net

I'm trying to convert existing GridView table to a Boostrap Datatable. So far I have this script:

<div class="container-fluid">
      <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AllowPaging="True" PageSize="40" OnPageIndexChanging="GridView1_PageIndexChanging" OnSelectedIndexChanging="GridView1_SelectedIndexChanging"
      OnRowCommand="GridView1_RowCommand">
        <Columns>
          <asp:TemplateField>
            <HeaderTemplate>
              </table>
              <Columns>
                <div class="row">
                  <div class="col-md-12">
                    <table id="list" class="table table-striped table-bordered dt-responsive nowrap table-hover" cellspacing="0" width="100%">
                      <thead>
                        <tr>
                          <th>customer</th>
                          <th>adres</th>
                          <th>phone</th>
                          <th>coments</th>
                          <th>inq</th>
                          <th>Esti</th>
                          <th>Prop</th>
                          <th>Jobs</th>
                          <th>pics</th>
                          <th>docs</th>
                          <th>rep</th>
                        </tr>
                      </thead>
                      <tbody>
            </HeaderTemplate>
            <ItemTemplate>
              <tr>
                <td>
                  <asp:Label runat="server" ID="CustomerID" Text='<% #Eval("Customer") %>'>
                  </asp:Label>
                </td>
                <td>
                  <asp:Label runat="server" ID="Label1" Text='<% #Eval("CustomerAddress") %>'>
                  </asp:Label>
                </td>
                <td>
                  <asp:Label runat="server" ID="Label2" Text='<% #Eval("ResPhone") %>'>
                  </asp:Label>
                </td>
                <td>Comments</td>
                <td>Inq</td>
                <td>Estimates</td>
                <td>Proposals</td>
                <td>Jobs</td>
                <td>Pics</td>
                <td>Docs</td>
                <td>Rep</td>
              </tr>
            </ItemTemplate>
            <FooterTemplate>
              </tbody>
              </table>
              </div>
              </div>
            </FooterTemplate>
          </asp:TemplateField>
          </Columns>
      </asp:GridView>
    </div>
 <script>
        $(document).ready(function () {
            $('#list').DataTable({
                "order": [
                  [0, "desc"]
                ]
            });
        });
    </script>

The data is kind of shown in the new table, but the sorting is now showing up, probably because of this Javascript error

Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined

The render itself isn't clean as well. There is an additional row (marked red) after each row.

Any way to fix this? Thanks!