there are table that appears after clicking on the icon. i need to parse the level of the CO

there are divs like that:

<div class="awesome-marker-icon-green awesome-marker leaflet-zoom-animated leaflet-interactive" tabindex="0" style="margin-left: -17px; margin-top: -42px; width: 35px; height: 45px; transform: translate3d(79px, 254px, 0px); z-index: 254; outline: none;"><i style="" class=" ion ion-ios-close  icon-black"></i></div>
<div class="awesome-marker-icon-red awesome-marker leaflet-zoom-animated leaflet-interactive" tabindex="0" style="margin-left: -17px; margin-top: -42px; width: 35px; height: 45px; transform: translate3d(144px, 276px, 0px); z-index: 276; outline: none;"><i style="" class=" ion ion-ios-close  icon-black"></i></div>
<div class="awesome-marker-icon-red awesome-marker leaflet-zoom-animated leaflet-interactive" tabindex="0" style="margin-left: -17px; margin-top: -42px; width: 35px; height: 45px; transform: translate3d(146px, 268px, 0px); z-index: 268;"><i style="" class=" ion ion-ios-close  icon-black"></i></div>
<div class="awesome-marker-icon-beige awesome-marker leaflet-zoom-animated leaflet-interactive" tabindex="0" style="margin-left: -17px; margin-top: -42px; width: 35px; height: 45px; transform: translate3d(14px, 218px, 0px); z-index: 218;"><i style="" class=" ion ion-ios-close  icon-black"></i></div>
<div class="awesome-marker-icon-green awesome-marker leaflet-zoom-animated leaflet-interactive" tabindex="0" style="margin-left: -17px; margin-top: -42px; width: 35px; height: 45px; transform: translate3d(29px, 212px, 0px); z-index: 212;"><i style="" class=" ion ion-ios-close  icon-black"></i></div>

and so on. after clicking one of them appears a table:

<div class="leaflet-pane leaflet-popup-pane"><div class="leaflet-popup  leaflet-zoom-animated" style="opacity: 1; transform: translate3d(145px, 244px, 0px); bottom: -7px; left: -171px;"><div class="leaflet-popup-content-wrapper"><div class="leaflet-popup-content" style="width: 301px;">
 2024-03-21 20:00:00<table style="border-collapse:collapse;" class="table_2933" border="1">
<caption><b><span style="color:#000000">ПНЗ№4 : Кустанай, ул. Маяковского-Волынова </span></b></caption><tbody><tr>
</tr></tbody><caption id="footer" align="bottom"><b><span style="color:#000000">Модель SILAM, адаптированная для Казахстана по ссылке:</span></b> <a href="http://silam.fmi.fi/roux/KAZ/">http://silam.fmi.fi/roux/KAZ/</a></caption>
<colgroup><col width="100">
<col width="100">
<col width="100">
<col width="100">
</colgroup><thead>
<tr>
  <th colspan="1" id="tableHTML_second_header_1" style="height:30px;background-color: #e6e6e6;font-size:12px;text-align:center;"></th>
  <th colspan="4" id="tableHTML_second_header_2" style="height:30px;background-color: #e6e6e6;font-size:12px;text-align:center;">Концентрация, мкг/м3</th>
</tr>
<tr>
  <th id="tableHTML_header_1" style="height:30px;background-color: #e6e6e6;text-align:center;padding-left:5px;padding-right:5px;">Показатели</th>
  <th id="tableHTML_header_2" style="height:30px;background-color: #e6e6e6;text-align:center;padding-left:5px;padding-right:5px;">Фактическое значение</th>
  <th id="tableHTML_header_3" style="height:30px;background-color: #e6e6e6;text-align:center;padding-left:5px;padding-right:5px;">Прогноз 24 часа</th>
  <th id="tableHTML_header_4" style="height:30px;background-color: #e6e6e6;text-align:center;padding-left:5px;padding-right:5px;">Прогноз 48 часов</th>
</tr>
</thead>
<tbody>
<tr>
  <td id="tableHTML_column_1" style="text-align:center;">CO</td>
  <td id="tableHTML_column_2" style="text-align:center;">462</td>
  <td id="tableHTML_column_3" style="text-align:center;">264</td>
  <td id="tableHTML_column_4" style="text-align:center;">268</td>
</tr>
<tr>
  <td id="tableHTML_column_1" style="text-align:center;">NO</td>
  <td id="tableHTML_column_2" style="text-align:center;">45</td>
  <td id="tableHTML_column_3" style="text-align:center;">0</td>
  <td id="tableHTML_column_4" style="text-align:center;">0</td>
</tr>
<tr>
  <td id="tableHTML_column_1" style="text-align:center;">NO2</td>
  <td id="tableHTML_column_2" style="text-align:center;"><span style="background-color:#ff0000">485</span></td>
  <td id="tableHTML_column_3" style="text-align:center;">4</td>
  <td id="tableHTML_column_4" style="text-align:center;">2</td>
</tr>
<tr>
  <td id="tableHTML_column_1" style="text-align:center;">SO2</td>
  <td id="tableHTML_column_2" style="text-align:center;">6</td>
  <td id="tableHTML_column_3" style="text-align:center;">6</td>
  <td id="tableHTML_column_4" style="text-align:center;">3</td>
</tr>
</tbody>
</table></div></div><div class="leaflet-popup-tip-container"><div class="leaflet-popup-tip"></div></div><a class="leaflet-popup-close-button" href="#close">×</a></div></div>

i need to parse level of the CO, NO, NO2, and SO2. the problem is that everything is gone after exiting the table and there is no stable element that i can use. http://ecodata.kz:3838/app_dem_visual/ to know better

i have tried that, i think that is the best i have

const puppeteer = require('puppeteer');


(async () => {
  try {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto('http://ecodata.kz:3838/app_dem_visual/');

    await page.waitForSelector('.ico');

    const icons = await page.$$eval('.ico', icons => icons.map(icon => icon.outerHTML));

    
    const popups = [];
    for (const icon of icons) {
      
      await page.setContent(icon);
      
      try {
        await page.waitForSelector('.leaflet-popup-content', { timeout: 10000 });

        const popupText = await page.$eval('.leaflet-popup-content', popup => popup.textContent);
        popups.push(popupText);
      } catch (error) {
        console.error('Error while waiting for popup:', error);
      } 
    }

    console.log(popups);

    await browser.close();
  } catch (error) {
    console.error('Error during script execution:', error);
  }
})();