Update ag grid data on same route in python flask

I am having a use case where I have sub navigation withing the same route. So my main route is dashboard and in dashboard I have 3 tabs tabA, tabB, and tabC

By default I load agGridData on tabA and when i click on tabB i need to change the entire grid.

routes.py code

@blueprint.route('/dashboard', methods = ["GET"])
@login_required
def get_summary():                                                           
    try:                                                                        
        key = request.args.get('key')                                           
        cobContext = request.args.get('cobContext')                                               
        headers = get_primary_header(request)
        headers["Content-Type"] = "application/json"                            
                                                                                
        data = '{"key":"'+key+'", "cobContext": "'+cobContext+'"}'                                              
        response = requests.post(current_app.config['DASHBOARD_HOST'] + '/api/CacheMonitor/getSummary', data = data, headers = headers, cert=(current_app.config['CERT_PATH'], current_app.config['KEY_PATH']), verify=current_app.config['VERIFY'])
        data = json.loads(response.text) 
        return render_template('dashboard.html', form = data, key = key, cobContext = cobContext)                                         
    except ConnectionError:
        return render_template('server_down.html')
    except Exception as e:                                                      
        return render_template('page-500.html')


@blueprint.route('/tab-b', methods = ["GET"])
@login_required
def get_tabB_details():                                                           
    try:
                                                                                    
        headers = get_primary_header(request)
        headers["Content-Type"] = "application/json"                                
        data = '{"cob":"'+cob+'", "context":"'+context+'"}'                         
                                                                                    
        response = requests.post(current_app.config['CACHEMANAGER_HOST'] + '/api/CacheMonitor/getTabb', data = data, headers = headers, cert=(current_app.config['CERT_PATH'], current_app.config['KEY_PATH']), verify=current_app.config['VERIFY'])
        data = json.loads(response.text)
        if data["sumB"]==None:
            data["sumB"] = []
        return render_template('dashboard.html', form=data)
    except ConnectionError:
        return render_template('server_down.html')
    except Exception as e:
        print(str(e))
        return render_template('page-500.html')

dashboard.html

<ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active text-uppercase" id="tabA" data-toggle="tab" href="#tabA"
                            role="tab" aria-controls="tabA" aria-selected="true">Tab A</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-uppercase" id="tabB" data-toggle="tab" href="#tabB"
                            role="tab" aria-controls="tabB" aria-selected="false">Tab B</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-uppercase" id="tabC" data-toggle="tab"
                            href="#tabC" role="tab" aria-controls="tabC"
                            aria-selected="false">COB Context Details</a>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="tabA" role="tabpanel" aria-labelledby="tabA"><div id="tabAgrid"></<div>
                    <div class="tab-pane fade" id="tabB" role="tabpanel" aria-labelledby="tabB"><div id="tabBgrid"></<div>
                </div>

<script>
const gridOptions = {...} // defined assume its defined properly
document.addEventListener('DOMContentLoaded', function () {
                var gridDiv = document.querySelector('#tabAgrid');
                new agGrid.Grid(gridDiv, gridOptions);
            });

const gridOptionsTabB = {...} //defined assume defined properly

$("#tab-b").click(function () {
                 $.get("tab-b", function (data) {
                        console.log("{{form}}"); // it prints old form data retrieved from dashboard api
                        const gridDiv = document.querySelector('#tabBgrid');
                        new agGrid.Grid(gridDiv, gridoptionsTabB);
                    //}
                })
            });

            });

</script>

So first grid loads properly with data. However when i click on Tab B, tab changes and the grid is shown with gridBOptions headers, however data doesnt load in tab. Please suggest how can i resolve, basically we need to update form in render template.