Multiple tabs with buttons

Hi, I’m struggling to get multiple tabs with buttons. When switching between tabs it doesn’t remove the content from previous tab and throws the error in browser “SyntaxError: Unexpected end of JSON input: index.js:542”. Here is the code:

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output

dash_app = dash.Dash(url_base_pathname= '/')

dash_app.layout = html.Div([
        html.H1('Parameters'),
        dcc.Tabs(id="tabs", children=[
            # Commodity
            dcc.Tab(id = 'tab-commodity',label='Commodity', children=[
                html.H3('Commodity asset class'),
                html.Div(id='table-commodity'),
                html.Button('Calculate', id='button-commodity', n_clicks=0)
            ]),
            # Credit Spread
            dcc.Tab(id = 'tab-credit',label='Credit Spread', children=[
                html.H3('Credit Spread asset class'),
                html.Div(id='table-credit'),
                html.Button('Calculate', id='button-credit', n_clicks=0)
            ])
        ])
    ])

    # Commodity
    @dash_app.callback(Output('table-commodity', 'children'),
                       [Input('button-commodity', 'n_clicks')])
    def update_table_commodity(n_clicks, val=None):
        return f'Commodity clicked {n_clicks} times.'

    # Credit Spread
    @dash_app.callback(Output('table-credit', 'children'),
                       [Input('button-credit', 'n_clicks')])
    def update_table_credit_spread(n_clicks, val=None):
        return f'Credit Spread clicked {n_clicks} times.'


if __name__ == '__main__':
    dash_app.run_server(debug=True)