montpellier

Конечно можно. Вот мой пример, где то делал давно подобное

let area = document.querySelectorAll('.area')
            area.forEach(area => {
                area.classList.remove('active')
            })

Так же можешь вторым параметром передавать ключ.

let area = document.querySelectorAll('.area')
            area.forEach((area, key) => {
                area.classList.remove('active');
                 console.log(key);
            })

В Joomla условием того, показывается ли модуль на данной странице или нет, является привязка этого модуля к тому или иному пункту меню.

Если материалов не очень много, можно создать отдельное "системное", скрытое меню и для каждого материала отдельный пункт в этом меню и привязать к каждому пункту свой модуль, выводящий свою таблицу для этого материала.

Другой способ - использовать модуль MetaMod, который значительно расширяет количество условий для показа того или иного модуля и избавляет от необходимости создавать все эти пункты меню. Модули же, тем не менее, создать придётся. В MetaMod используем примерно такой кастомный код в поле PHP:

if (( $view == 'article' ) and ( $id == '123' )) return 12; // 123 - ID материала, 12 - ID модуля
if (( $view == 'article' ) and ( $id == '124' )) return 13;
if (( $view == 'article' ) and ( $id == '125' )) return 14;

и так далее.

Модуль MetaMod разместить в той позиции, где должны выводиться динамические таблицы.

Самый дуболомный вариант:

$sql = mysql_query("SELECT * FROM TotalTickets ORDER BY email ASC") or die(mysql_error());
$cust_email = false; $cust_txt = ""; $cust_sum = 0;
while($cust = mysql_fetch_array($sql, MYSQL_ASSOC))
{
    if ($cust_email !== false AND $cust_email != $cust['email'])
    {
        echo '<tbody class="labels">
                    <tr>
                        <td colspan="5">
                            <label for="accounting">'.$cust_email.': '.round($cust_sum, 2).'</label>
                            <input type="checkbox" name="accounting" id="accounting" data-toggle="toggle">
                        </td>
                    </tr>
                </tbody>
               <tbody class="hide">
                  '.$cust_txt.'
               </tbody> ';
        $cust_email = $cust['email'];
        $cust_txt = "";
        $cust_sum = 0;
    }
    $cust_sum += $cust['price'];
    $cust_txt .= '                    <tr>
                        <td>'.$cust['filmName'].'</td>
                        <td>'.$cust['date'].'</td>
                        <td>'.$cust['timeBegin'].'</td>
                        <td>'.$cust['price'].'</td>
                        <td>0</td>
                   </tr>';
}
if (!empty($cust_txt))
{
    echo '<tbody class="labels">
                    <tr>
                        <td colspan="5">
                            <label for="accounting">'.$cust_email.': '.round($cust_sum, 2).'</label>
                            <input type="checkbox" name="accounting" id="accounting" data-toggle="toggle">
                        </td>
                    </tr>
                </tbody>
               <tbody class="hide">
                  '.$cust_txt.'
               </tbody> ';
}

Во-первых id это уникальный идентификатор. Делать несколько элементов с одним id это в корне неправильно + через JQuery по id вы получите в ответ только один элемент. Используйте классы:

<div class="aboutfilm">
    .....
</div>

<script>
$('.aboutfilm').each(function() {
    $(this).on('click', () => {
        $(this).parent().find('.test').addClass('card-text-change');
        $(this).parent().find('.card-text').css('opacity', '1');
        $(this).css('display','none');
    });
});
</script>