Как создать новый класс или идентификатор для каждой записи MySQL, представленной в HTML

Question

Итак, у меня есть приложение Python (Flask). Если быть точным, это приложение для блога. У меня есть форма, которая отправляет статью в базу данных MySQL, а затем на моей странице index.html она отображает каждую запись (статью). Я хочу добавить эту изящную функцию, которая на моей странице index.html показывает только описание, и если посетитель хочет прочитать больше, он нажимает на кнопку «читать дальше», и вся статья предоставляется. Однако, поскольку у меня есть несколько статей, кнопка «читать дальше» работает только для одной статьи, а не для других. Все статьи отображаются успешно, но чтение больше работает только для первой отображаемой статьи. Ниже мой код. Я также делаю переход read more через javascript, ориентируясь на идентификатор div, который я хочу расширить (подробнее)

 <!-- articles -->
        {% for row in value %}
        <div class="articleRow">
           <div class="col">
                <h2>{{row[1]}}</h2>
                <p class="authorDate">Author: {{row[2]}}</p>
                <p class="authorDate">{{row[3]}}</p>
                <p class="description">{{row[4]}}</p>
                <a class="articleLink" href="">{{row[6]}}</a>
                <a class="readMore" id="readMore" href="javascript:void(0)" onclick="showArticle()">Read More</a>
           </div>
        </div>
        <div class="slideRow" id="slideRow">
            <div class="slideCol" id="slideCol">
                <article class="articleSlide" id="articleSlide">
                    {{row[5]}}
                </article>
                <a class="readLess" id="readLess" href="javascript:void(0)" onclick="hideArticle()">Read Less</a> 
            </div>
        </div>
    {% endfor %}

===================================
Javascript to have readmore affect
===================================
<script>
        function openNav() {
            document.getElementById("sideNav").style.width = "300px";
        }

        function closeNav() {
            document.getElementById("sideNav").style.width = "0";
        }

        function showArticle () {
            document.getElementById("slideRow").style.height="auto";
            document.getElementById("slideCol").style.height="auto";
            document.getElementById("articleSlide").style.display="inline-block";
            document.getElementById("readMore").style.display="none";
            document.getElementById("readLess").style.display="block";
        }

        function hideArticle() {
            document.getElementById("slideRow").style.height="0";
            document.getElementById("slideCol").style.height="0";
            document.getElementById("articleSlide").style.display="none";
            document.getElementById("readMore").style.display="inline-block";
            document.getElementById("readLess").style.display="none";
        }
    </script>

Answer 1

Вы можете использовать JS для захвата идентификатора, а затем указать этот идентификатор в строке, которую хотите скрыть.

Пример:

document.querySelectorAll('a.js-hide').forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault()
    const dataId = el.getAttribute('data-id')
    const contentEl = document.querySelector('#' + dataId)
    
    contentEl.style.display === "none" ? contentEl.style.display = "block" : contentEl.style.display = "none"
  })
})

<div id="content-1">Content 1</div>
<a href="#" class="js-hide" data-id="content-1">Toggle c1</a>

<br />
<br />

<div id="content-2">Content 2</div>
<a href="#" class="js-hide" data-id="content-2">Toggle c2</a>

Для вашей реализации вы можете просто заменить content-* на префикс content-, а затем использовать переменную ID, чтобы сделать его уникальным. Таким образом, вы можете использовать что-то вроде этого: content-{{variable.id}} (или что бы то ни было ID в этом случае).