if i use a span tag or a tag its working but if use button in the <td> its not being rendered also when ever i point to any js its not working or rendering. it can be in the script or web_assets_backend nothing is working 
Odoo 17

def create_article_calendar(self):
    if not self.product_line_ids:
        raise ValidationError("Please add an agenda before making an Article!")

    counter = 1
    company_id = self.env.company
    product_id = self.product_id.id
    logo = company_id.logo
    if logo:
        logo_html = Markup('<img src="%s" class="bg-view" alt="Company Logo"/>') % self._get_src_data_b64(logo)
    else:
        logo_html = ''

    html_content = Markup("""
        <table class="table">
            <thead>
                <tr style="border: 0px; background-color: #ffffff;">
                    <th style="padding: 10px; border: 0px;">ID</th>
                    <th style="padding: 10px; border: 0px;">Agenda Item</th>
                    <th style="padding: 10px; border: 0px;">Presenter</th>
                    <th style="padding: 10px; border: 0px;">Action</th>
                </tr>
            </thead>
            <tbody id="article_body">
    """)

    for line in self.product_line_ids:
        presenters = ', '.join(presenter.name for presenter in line.presenter_id)
        html_content += Markup("""
            <tr style="border: 0px;">
                <td style="padding: 10px; border: 0px;">{counter}</td>
                <td style="padding: 10px; border: 0px;">{description}</td>
                <td style="padding: 10px; border: 0px;">{presenters}</td>
                <td style="padding: 10px; border: 0px;">
                    <span type="button" style="display: inline-block; padding: 10px 20px; background-color: #17a2b8; color: #fff; cursor: pointer; border-radius: 5px;" 
                          onclick="triggerAction({counter})"> Attachments </span>
                </td>
            </tr>
        """).format(
            counter=counter,
            description=line.description or 'N/A',
            presenters=presenters or 'N/A'
        )
        counter += 1

    html_content += Markup("""
            </tbody>
        </table>
        <script>
            function triggerAction(id) {
                console.log("Button clicked with ID: ", id);
                alert("Action triggered with ID: " + id);
            }
        </script>
    """)

    body_content = Markup("""
        <div>
            <header style="text-align: center;">
                {logo_html}<br><br>
                <h2><strong>{company_name}<strong></h2>
            </header>
            <div class="container">
                <div class="card-body border-dark">
                    <div class="row no-gutters align-items-center">
                        <div class="col align-items-center">
                            <p class="mb-0">
                                <span> {company_street} </span>
                            </p>
                            <p class="mb-0">
                               <span> {company_city} </span>
                            </p>
                            <p class="m-0">
                               <span> {company_country} </span>
                            </p>
                        </div>
                        <div class="col-auto">
                            <div class="float-right text-end">
                                <p class="mb-0 float-right">
                                    <span> {company_phone} </span>
                                    <i class="fa fa-phone-square ms-2 text-info" title="Phone"/>
                                </p>
                                <p class="mb-0 float-right">
                                   <span> {company_email} </span>
                                    <i class="fa fa-envelope ms-2 text-info" title="Email"/>
                                </p>
                                <p class="mb-0 float-right">
                                    <span> {company_website} </span>
                                    <i class="fa fa-globe ms-2 text-info" title="Website"/>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div><br><hr>
            <div class="container">
            <p><strong style='font-size: 14px;'>Title: </strong> {event_name}</p>
            <p><strong>Start Date:</strong> {start_date}</p>
            <p><strong>Organizer:</strong> {organizer}</p>
            <p><strong>Subject:</strong> {description}</p>
            </div>
            <hr/>
            {html_content}
        </div>
    """).format(
        logo_html=logo_html,
        company_name=company_id.name,
        company_street=company_id.street,
        company_city=company_id.city,
        company_country=company_id.country_id.name,
        company_phone=company_id.phone,
        company_email=company_id.email,
        company_website=company_id.website,
        event_name=self.name,
        start_date=self.start_date or ' ',
        organizer=self.user_id.name,
        description=self.description,
        html_content=html_content
    )

    # Log the generated HTML for debugging
    _logger.info("Generated HTML content for the article: %s", body_content)

    article_values = {
        'name': Markup("Agenda: {event_name}").format(event_name=self.name),
        'body': body_content,
        'calendar_id': self.id,
    }

    article = self.env['knowledge.article'].sudo().create(article_values)
    self.article_id = article.id

    self.article_id.product_id = self.product_id.id
    self.last_write_count = len(self.product_line_ids)
    self.last_write_date = fields.Datetime.now()