HTML Div add unique id to definition (python and dash)

I am attempting to create a web application containing a number of leaderboards. I hope to be able to update these table based on an dropdown input but have hit a hurdle.

For ease, I have created a def to generate a data frame / table based on a panda data frame. My thinking is that would save space when writing the web app.

def make_leaderboard(df):
    return html.Div([
        dash_table.DataTable(
            columns=[{"name": i, "id": i} for i in df.columns],
            data=df.to_dict('records'),
            style_header={
                'backgroundColor': red,
                'color': 'white',
                'border': '0px',
                'font_family': 'Roboto',
                'font_size' : '11px',
                'line_height': '20px',
                'whiteSpace': 'normal',
            },
            style_cell={'padding': '5px', 'border': '0px', 'textAlign': 'center', 'font_family': 'Roboto', 'fontWeight': '100', 'font_size' : '11px', 'line_height': '20px'},
            style_cell_conditional=[
            {
            'if': {'column_id': c},
                'textAlign': 'left'
            } for c in ['']
            ],
            style_as_list_view=True,
            page_action='native',
            fixed_rows={'headers':True},
            style_table={'height': '250px', 'overflowY': 'auto'},
        ),
        html.Br([]),
        ])

I have created the callback to filter the table but can't link the callback to a table id as not sure how to do this and am getting an error back (unable to find id). Assume the issue is as it is general definition, I can't generate a specific id within the def

#row
html.Div([
    html.Div([
        html.Div([
            html.H6(['TWO POINT PERCENTAGE'],),
            html.Div(make_leaderboard(df_two_leaderboard),),
        ], className='four columns'),
        html.Div([
            html.H6(['THREE POINT PERCENTAGE'],),
            html.Div(make_leaderboard(df_three_leaderboard)),
        ], className='four columns'),
        html.Div([
            html.H6(['FREE THROW PERCENTAGE'],),
            html.Div(make_leaderboard(df_ft_leaderboard)),
        ], className='four columns'),
    ], className="row container-display",),
],
),

Can I simply add the id to the div element? In the example code above I have generated 3 tables.

At the moment I just want to get one table updated and then hope I can add multiple table ids so I can update all of tables in the web app.

Call back function

@app.callback(
    Output(component_id='leaderboard', component_property='data'),  #believe the 'leaderboard' needs to be the unique table id
    [Input(component_id='select_position', component_property='value')]
)

def update_df_div(option_selected):
    filter_df = df_two_leaderboard[df_two_leaderboard['POS'].isin(option_selected)]
    data = filtered_df.to_dict('records')
    return data

Thank you for any help