Move from one Tab to another after clicking Achor Tag using jQuery

I have tried the above jQuery but when i click that Recieve Product anchor tag it does not redirect to the tab "Product Payment" after clicking it, of which thats what I am expected of it (when i click that Achor tag it should redirect me to Product Payment, Initially when the page is loaded the Recieve Product is active

<div id="Producttabs">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a id="Products" href="#tab1">get Products</a></li>
        <li><a data-toggle="tab" id="Suppliers" href="#tab2">Suppliers</a></li>
        <li><a data-toggle="tab" id="Payment" href="#tab3">Product Payment</a></li>
        <li><a data-toggle="tab" id="Delivery" href="#tab4">Product Delivery</a></li>
    </ul>

    <div class="tab-content">
        <div id="tab1" class="tab-pane in active">
            <p>Content goes here</p>
        </div>
        <div id="tab2" class="tab-pane ">
            <p>Content goes here</p>
        </div>
        <div id="tab3" class="tab-pane ">
            <p>Content goes here</p>
        </div>
        <div id="tab4" class="tab-pane ">
            <p>Content goes here</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $.fn.dataTable.moment('DD-MM-YYYY');
        try {
            $('#tblacknowledge').dataTable({
                "pageLength": 6,
                "autowidth": true,
                "processing": true,
                "bserverSide": true,
                "order": [[1, "desc"]],
                "ajax": {
                    "url": "/Manufacturing/Products/getproduct",
                    "type": "GET",
                    "dataType": "json"
                },
                "columns": [
                    { 'data': 'ProductID' },
                    { 'data': 'ProductName' },
                    {
                        'data': null,
                        "render": function (data, type, row) {

                            var tabId = $(this).data('tab'); // Extract tab ID from data-tab attribute
                            var tabIndex = $("#myTab a[href='" + tabId + "']").parent().index(); // Get index of tab
                            return '<a id="AcknowledgeReceiptLink" class="tab-link"  data-tab="' + tabId + '"  href=""/Manufacturing/Products/getproduct?ProductID=' + row.ProductID + '&userId=' + row.UserId + '&ProductName=' + row.ProductName + '">Recieve Product</a>';
                        }
                    }
                ]
            })
        }
        catch (err) {
            alert(err.stack);
        }
        $(".tab-link").on('click', function (e) {
            e.preventDefault(); // 
            var tabId = $(this).data('tab');
            $("#Producttabs").tabs("option", "active", $(tabId).index());
        });
    });
</script>