Add page-break to table row created dynamically via JQuery

I'm trying to add pagebreak to a table row created dinamically via JQuery.

element.before("<tr class='pagebreak'> </tr>");

When I do this, the element is rightly created, but CSS is not applied; while if I create the same element via static HTML, pagebreak works

<tr class="pagebreak"> </tr>

I'm using the following css to style the pagebreak class:

    @media print {
       .pagebreak {
          display: block;
          page-break-after: always !important;
          break-after: page;
       }
    }

Note well that if I put pagebreak class to an element created dynamically out of the table it works correctly.

Here is a section of table code:

<h2 style="display: inline"> TENDAGGI </h2>
<div id="container-listino-tendaggi" class="container-fluid px-0" style="display: block">
   <h3> Tende da Arredo per Interni </h3>
   <div name="container-tende-da-arredo-per-interni" class="py-2 container-articoli-categoria">
      <table class="table table-striped table-hover table-no-bordered table-sm">
         <thead>
           <tr class="table-dark text-center align-middle">
              <th name="header-codice" class="col-auto">
                 Codice
              </th>
              <th name="header-nome" class="col-auto">
                 Articolo
              </th>
              <th name="header-altezza" class="col-auto">
                 Altezza
              </th>
              <th name="header-composizione" class="col-auto">
                 Composizione
              </th>
              <th name="header-descrizione" class="col-auto">
                 Descrizione
              </th>
              <th name="header-prezzo-confezione-unita-iva-esclusa" class="col-2">
                 Prezzo pezza x metro
                 <div class="d-xxxl-none"></div>
                 (IVA esclusa)
              </th>
              <th name="header-prezzo-unita-iva-esclusa" class="col-2">
                 Prezzo taglio
                 <div class="d-xxxl-none"></div>
                 (IVA esclusa)
              </th>
           </tr>
         </thead>

         <tbody>
           <tr name="riga-prodotto" class="table-warning text-center">
              <td name="cella-codice">
                 <i> P<span>221</span> </i>
              </td>
              <td name="cella-nome-prodotto">
                 1652 *
              </td>
              <td name="cella-altezza">
                 <span> 330 cm con piombo </span>
              </td>
              <td name="cella-composizione">
                 <span> 100% poliestere </span>
              </td>
              <td name="cella-descrizione">
                 <span> Unito Jacquard </span>
              </td>
              <td name="cella-prezzo-confezione-unita">
                 <div class="row">
                    <div class="col-12 text-center">                
                       <b>50,164</b>€ (30,00 metri lineari)         
                    </div>
                 </div>
              </td>
              <td name="cella-prezzo-unita">
                 <div class="row">
                    <div class="col-12 text-center">
                       <span>
                       <b> 59,02€ </b>             </span>
                    </div>
                 </div>
              </td>
           </tr>
           <tr>
              <td class="col-1 table-active"> </td>
              <td name="cella-nomi-attributi-variante" class="col-auto table-active">
                 <div class="row">
                    <div class="d-flex align-items-center col-12">
                       COLORE
                    </div>
                 </div>
              </td>
              <td class="col-auto table-active" colspan="5"> </td>
           </tr>
           <tr class="align-middle text-center tablesorter-ignoreRow">
              <td name="cella-codice-variante">
                 <i> V<span>4299</span> </i>
              </td>
              <!-- Cella nome variante -->
              <td name="cella-attributi-variante" class="text-start" colspan="2">
                 <div class="row">
                    <div class="col-12">
                       1
                    </div>
                 </div>
              </td>
              <td name="cella-composizione-variante">
              </td>
              <td name="cella-descrizione-variante">
              </td>
              <td name="cella-prezzo-confezione-unita">
                 <div class="row">
                    <div class="col-12 text-center">             
                       <span> // </span>       
                    </div>
                 </div>
              </td>
              <td name="cella-prezzo-unita">
                 <div class="row">
                    <div class="col-12 text-center">             
                       <span> // </span>       
                    </div>
                 </div>
              </td>
           </tr>
           <tr class="align-middle text-center tablesorter-ignoreRow">
              <td name="cella-codice-variante">
                 <i> V<span>4300</span> </i>
              </td>
              <!-- Cella nome variante -->
              <td name="cella-attributi-variante" class="text-start" colspan="2">
                 <div class="row">
                    <div class="col-12">
                       2
                    </div>
                 </div>
              </td>
              <td name="cella-composizione-variante">
              </td>
              <td name="cella-descrizione-variante">
              </td>
              <td name="cella-prezzo-confezione-unita">
                 <div class="row">
                    <div class="col-12 text-center">             
                       <span> // </span>       
                    </div>
                 </div>
              </td>
              <td name="cella-prezzo-unita">
                 <div class="row">
                    <div class="col-12 text-center">             
                       <span> // </span>       
                    </div>
                 </div>
              </td>
           </tr>
        </tbody>
     </table>
   </div>
</div>

And this is the JQuery script used to add table rows:

$(document).ready(function() {
   const MAX_PAGE_HEIGHT = 850;
   var page_height = 0;

   $("div.container-articoli-categoria").each(function( index ) {
      items_table = $(this);
      page_height = 0;

      header_row = $(items_table).find("tr").first();
      html_header_row = header_row.parent().html().replace(new RegExp("th", "g"), "td");
      height_header_row = header_row.height();

      $(items_table).find("tr").each(function( index ) {
         table_row = $(this);
         page_height += table_row.height();

         if( table_row.attr('name') == "riga-prodotto" )
            product_row = table_row;

         if( page_height > MAX_PAGE_HEIGHT ) {
            product_row.before("<tr class='pagebreak'> </tr>");
            product_row.before(html_header_row);

            if( table_row.attr('name') == "riga-prodotto" )
               page_height = height_header_row + product_row.height();
   
            else
               page_height = height_header_row + product_row.height() + table_row.height();
         }
      });
   });
});