Как правильно вывести через скрипт с алгоритмом правильную картинку?

я вот вообще не силен в кодинге.. но мне понадобился скрипт для сайта, Пробовал через gpt4 сделать но в итоге работает кривовато. Перейдем к требованиям которые мне были нужны:

Нужен скрипт на js и html. Он должен будет высчитывать из нескольких скрытых тегов на сайте и по формуле выдавать число, Таких тегов будет несколько, один тег будет рассчитываться по формуле 1=10, второй 1=1, третий 1=5. скрипт должен складывать итоговое значение 10+5+1= 16 и далее по таблице сверяться : от 0 до 100=1 от 101 до 500=2 от 501 до 1000=3 от 1001 до 1500=4 от 1501 до 2000=5 от 2001 до 3000=6 от 3001 до 4500=7

Далее он будет формировать ссылку <img alt="" name="rankimg" border="0" src="/icon/значение из формулы1/здесь будет еще один тег сайта.png" align="absmiddle"< тут вторая скобка просто в редакторе не вставляется...

Дополнения: скрипт должен работать на сайте с движком dle 15.3 и форумом под управлением Bullet Energy 1.3-rev-2021.r9

Если на странице пользователя все работает, то на странице форума скрипт не хочет нормально работать, он зацикливается на первом сообщении и все, либо загружает только первому сообщению картинку остальные пустые, либо загружает всем, причем разные из за "еще один тег сайта" а вот значение формулы для всех подгружается с первого сообщения. Пробовал через бота сгенерировать код на iframe и просто js с подгрузкой с самого движка и везде что то не так. Подскажите или напишите код что бы он нормально работал и для каждого сообщения из шаблоне "short_message.tpl" показывалась своя картинка. В шаблоне есть свои уникальные индификаторы {messageId} <-id сообщения, {autorName} <- имя автора поста ну или login фрейм брался примерно по методу адрес_сайта.com/user/{autorName} далее скрипт сам брал что необходимо, но увы не сильно помогло. Вот код который показывает картинку но не подсчитывает значения, сколрее всего подсчитывает с 1го поста.

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <li id="message-{messageId}"><div style="display: none;">
        <span class="tag" data-value="10">{news-num}</span> <!-- Этот тег = 10 -->
        <span class="tag" data-value="5">{forumPostNum}</span> <!-- Этот тег = 5 -->
        <span class="tag" data-value="1">{comm-num}</span> <!-- Этот тег = 1 -->
    </div>

<!-- Место для вывода изображения -->
<div id="result-{messageId}"></div>
<script>
    const messageIds = [{messageId1}, {messageId2}]; // Динамически генерируемые ID сообщений
</script>
<script>
    (function () {
        /**
         * Функция вычисления итогового значения и вывода изображения для одного сообщения.
         * @param {string} messageId - Уникальный идентификатор сообщения.
         */
        function calculateValueForMessage(messageId) {
            // Получаем текущий блок сообщения
            const messageBlock = document.getElementById(`message-{messageId}`);

            // Находим скрытые теги с данными внутри сообщения
            const tags = messageBlock.querySelectorAll('.tag');
            let totalValue = 0;

            // Проверяем существование тегов и вычисляем итоговое значение
            if (tags.length > 0) {
                tags.forEach((tag, index) => {
                    const value = parseInt(tag.getAttribute('data-value'), 10); // Получаем значение из атрибута data-value
                    if (!isNaN(value)) {
                        if (index === 0) totalValue += value * 10; // Первый тег: значение * 10
                        if (index === 1) totalValue += value * 5;  // Второй тег: значение * 5
                        if (index === 2) totalValue += value * 1;  // Третий тег: значение * 1
                    }
                });
            }

            // Определяем диапазон по итоговому значению
            let rangeValue;
            if (totalValue <= 100) rangeValue = 1;
            else if (totalValue <= 500) rangeValue = 2;
            else if (totalValue <= 1000) rangeValue = 3;
            else if (totalValue <= 1500) rangeValue = 4;
            else if (totalValue <= 3000) rangeValue = 5;
            else if (totalValue <= 4500) rangeValue = 6;
            else if (totalValue <= 6000) rangeValue = 7;

            // Формируем ссылку для изображения с использованием значений
            const imgUrl = `/icon/${rangeValue}/[xfgiven_group][xfvalue_group][/xfgiven_group][xfnotgiven_group]1[/xfnotgiven_group].png`;

            // Находим место для вывода изображения
            const resultElement = messageBlock.querySelector(`#result-{messageId}`);
            if (resultElement) {
                resultElement.innerHTML = `
                    <img alt="Rank Image" name="rankimg" border="0" src="${imgUrl}" align="absmiddle" style="margin:0;padding:0;border:0;width: 80px;height: 45px;">
                `;
            } else {
                console.error('Элемент с id="result" не найден для сообщения:', messageBlock);
            }
        }

        // Вызываем функцию для каждого сообщения, передавая уникальный идентификатор
        const messageIds = ['{messageId}']; // Замените на динамическое получение ID сообщений
        messageIds.forEach(messageId => calculateValueForMessage(messageId));
    })();
</script></li>