Change list element dynamically on onClick Button Event

I am new to Plotly Dash & I have been experimenting the last couple of days, but I don’t get any further with one challenge I have. I do not understand the callbacks really well. I did the examples from the documentation, but that did not help me either.

I have the following code:

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Output, Input

list_1 = ['2 Red', '2 Blue', '3 Green']
list_2 = ['10 Red', '8 Blue', '4 Green']

rgb = {c: int(n) for n, c in [p.split(' ') for p in list_2]}
for n, c in [p.split(' ') for p in list_1]:
    if c in rgb:
        rgb[c] -= int(n)
        rgb[c] = -int(n)
print([f'{rgb[p]} {p}' for p in rgb])

external_stylesheets = ['']
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, external_stylesheets, dbc.themes.GRID])

def dict_to_list():
    dict_list = []
    for k, v in rgb.items():
        dict_list.append(f"{v} {k}")
    return dict_list

rgb = dict_to_list()

button = dbc.Button("Subtract", outline=True, color="success", className="mr-1")

def show_list():
    return dbc.ListGroup([dbc.ListGroupItem(x) for x in list_2], style={'marginTop': '10px', 'marginLeft': '10px'})

def show_cards():

    cards = html.Div([
                    dbc.CardBody([b], style={'textAlign': 'center'}),
                    dbc.CardFooter([button], style={'textAlign': 'center'})
                ], style={'marginTop': '10px', 'marginRight': '10px', 'whiteSpace': 'pre-line'}) for b in list_1

    return cards

app.layout = html.Div([
            html.Content(children=show_list())], width=3),

            dbc.Container([dbc.CardColumns(children=show_cards())], style={'marginRight': '15px'})

if __name__ == '__main__':

The first part of the script just subtracts all the string elements from list_1 from list_2. The dashboards displays list_2 as a ListGroup & all list_1 elements as cards. My goal is to subtract the list_1 values from the corresponding list element in list_2 in Dash.

I know, that I need at least two callbacks, one for the list & one for the cards. If I push the ‘Subtract’ button, the subtraction should take place. And I do know, that I need to implement the rgb-functionality as well, but I do not have any idea how to start / break down the problem into easier parts.

I’d appreciate some code examples and tips as well as references to good tutorials or documentations.

Thank you so much!