This snippet represents my HTML template:
<div class="posts">
<h3> <a href ="{% url 'profile' p.user.id %}"> {{p.user}}: </a> </h3> <p>{{p.timestamp}}</p>
<br>
<p><i class="fas fa-heart"></i> {{ p.likes.count }}</p>
<p style="text-align: center;"> {{ p.post }} </p>
{% if p.user.id == user.id %}
<button class="btn btn-primary edit" style="display: inline;">Edit</button><hr></div>
<div id="editsec">
<textarea rows=6 cols=100 style="opacity: 0.7;">{{p.post}} </textarea>
<form action=""><button class="btn btn-success">Save</button></form>
</div>
{% endif %}
{% endfor %}
Within the CSS, I've hidden the editsec section so that it only appears when a user clicks on the edit button. Here is the corresponding JavaScript code:
document.addEventListener('DOMContentLoaded', function() {
var edit = document.getElementsByClassName('edit')
for (var i = 0 ; i < edit.length; i++) {
edit[i].addEventListener('click', () => {
document.getElementById('editsec').style.display = "block";
document.querySelector('.posts').style.display = "none";
});
}
});
However, when there are multiple posts on the homepage and I click on an edit button for a post, it still displays the editsec section of the first post. I attempted to make editsec a class by implementing the following:
document.addEventListener('DOMContentLoaded', function() {
var edit = document.getElementsByClassName('edit')
var editsec = document.getElementsByClassname('editsec')
for (var i = 0 ; i < edit.length; i++) {
edit[i].addEventListener('click', () => {
for (var a = 0 ; a < edit.length; a++) {
editsec[a].style.display = "block";
document.querySelector('.posts').style.display = "none";
}
});
}
});
Now, clicking on one edit button displays all editsec sections. How can I modify it to show only the respective post's edit section?