Selector Not Working in Bootgrid

I have an MVC C# Web Application and am using jQuery Bootgrid. The bootgrid is populating fine, the issue is there is a toggle button on the upper right of the grid that allows the user to select which columns in the grid are to be present. This feature is turned on with the following code "columnSelection: true". The issue is the button is not allowing the user to select the fields as it should. I have attached screen shots of how the button is supposed to function. When running through google dev, an error is thrown saying that it cannot find popper.js:1 Failed to load resource; however I have a reference to it (See Script Links below). Maybe it is the order of which I am loading. I have no idea at this point. Thanks.

Grid Snippet ---------------------------------------
    <script>
        var grid = $("#grid-data").bootgrid({
            ajax: false,
            caseSensitive: false,
            columnSelection: true,
            formatters: {
                "commands": function (column, row) {
                    return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.product_id + "," + row.client_id + "," + row.product_name + "," + row.description + "," + row.active + "\"><span class=\"fas fa-pencil-alt\"></span></button> " +
                        "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.product_id + "\"><span class=\"fas fa-trash-alt\"></span></button>";
                }
            }
        }).on("loaded.rs.jquery.bootgrid", function () {
            /* Executes after data is loaded and rendered */
            grid.find(".command-edit").on("click", function (e) {
                $("#EditProduct").modal("show");
                var array = $(this).data("row-id").split(',');
                $("#edit_Product_ID").val(array[0]);
                $("#edit_Client_ID").val(array[1]);
                $("#edit_Product_Name").val(array[2]);
                $("#edit_Description").val(array[3]);
                $("#edit_Active").prop("checked", (array[4] === "Yes" ? true : false));

            }).end().find(".command-delete").on("click", function (e) {
                $("#DeleteProduct").modal("show");
                $("#del_Product_ID").val($(this).data("row-id"));
            });
            });
        $("#grid-data-header").find('.actionBar').prepend(
            '<button id="btnAddProduct" class="btn btn-primary tx-11 tx-uppercase pd-y-12 pd-x-25 tx-mont tx-medium float-left" type="button" data-toggle="modal" data-target="#AddProduct">Add Product</button>');
        $(document).ready(function () {
            $("#Success").modal('@(Success.Equals("true") ? "show" : "hide")');
            $("#Failure").modal('@(Success.Equals("false") ? "show" : "hide")');
        });
    </script>
}

<div class="br-section-wrapper">
    <table class="table table-condensed table-hover table-striped" id="grid-data">
        <thead>
            <tr class="grid-header-nav">
                <th data-column-id="client_id" data-visible="false">Client ID</th>
                <th data-column-id="client_name">Client Name</th>
                <th data-column-id="product_id" data-visible="false">Product ID</th>
                <th data-column-id="product_name" data-order="desc">Product Name</th>
                <th data-column-id="description">Description</th>
                <th data-column-id="active" data-type="">Active</th>
                <th data-column-id="when_updated">Updated</th>
                <th data-column-id="who_updated">Updated By</th>
                <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
            </tr>
        </thead>
        <tbody>
            @{
                foreach (Product product in Model.Products)
                {
                    <tr>
                        <td>@product.Client_ID</td>
                        <td>@product.Client_Name</td>
                        <td>@product.Product_ID</td>
                        <td>@product.Product_Name</td>
                        <td>@product.Description</td>
                        <td>@(product.Active == true ? "Yes" : "No")</td>
                        <td>@product.Updated.ToLocalTime().ToString("M/dd/yyyy")</td>
                        <td>@product.Updated_By_Name</td>
                        <td></td>
                    </tr>
                }
            }
        </tbody>
    </table>
</div>

Script Links Snippet ---------------------------------------
   <script src="~/Scripts/lib/jquery/jquery-3.3.1.js"></script>
    <script src="~/Scripts/lib/popper.js/popper.js"></script>
    <script src="~/Scripts/lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="~/Scripts/lib/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
    <script src="~/Scripts/lib/moment/moment.js"></script>
    <script src="~/Scripts/lib/jquery-ui/jquery-ui.js"></script>
    <script src="~/Scripts/lib/jquery-switchbutton/jquery.switchButton.js"></script>
    <script src="~/Scripts/lib/peity/jquery.peity.js"></script>
    <script src="~/Scripts/lib/highlightjs/highlight.pack.js"></script>
    <script src="~/Scripts/lib/select2/js/select2.min.js"></script>
    <script src="~/Scripts/lib/jquery.bootgrid-1.3.1/jquery.bootgrid.min.js"></script>
    <script src="~/Scripts/js/bracket.js"></script>
EE-Selector_Icon.PNG
EE-Selector_Icon_Expanded.PNG
EE-Error.PNG