Dash callback not being triggered

Question

I am designing a Dash application using python. When a main button is pressed, a smaller button should appear. When this button sub-button is pressed, a count keeping track of the number of times it has been pressed must be incremented. Whenever the main button is pressed, another sub-button should be created with the same functionality as the first sub-button.

Only the latest sub-button that has been created works. It seems like the callback has not been trigged for the others. Any ideas on how to fix this are much appreciated.

I am using callbacks to perform this functionality. Here is a snippet of the web application example

This is the related code

import base64
import os
from urllib.parse import quote as urlquote

from flask import Flask, send_from_directory
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output,State
import dash_bootstrap_components as dbc
import uuid

server = Flask(__name__)
app = dash.Dash(
    server=server,
    external_stylesheets=[dbc.themes.BOOTSTRAP]
)



class_card_list = []

class Card:
    
    layout = [
        html.Div(id = f"s_1"),
        html.Button("Enter anything",id = f"b_one",n_clicks=0)
    ]

    @app.callback(
        Output(f"s_1","children"),
        Input(f"b_one","n_clicks")
    )

    def a(n_1):
        return f"Button one has been clicked {n_1} times"

app.layout = html.Div(id = "container",children=[
    dbc.Button("Press Here",id = "button_1",style={"width":"10vw"},n_clicks=0),
    html.Hr(),

])

@app.callback(
    Output("container","children"),
    Input("button_1","n_clicks"),
    State("container","children")
)

def more_classes(n_clicks,old_output):
    class_card = Card()
    class_card_list.append(class_card)
    return old_output + class_card.layout

if __name__ == "__main__":
    app.run_server(debug=True, port=8888)

Answer 1

For what I know callbacks aren't for manipulated DOM, probably to get effect you want you have to write JS scripts to hide/unhide object you want.