I’m trying to add a button to be able to delete posts from a log. For some reason, the delete button I’ve made only works for the top entry. Can anyone tell what I’m doing wrong?
(The X button itself is added in the script as well, because I intend on making it only accessible from a backend later)
<script>
$(function(){
$('.entry').each(function() {
$(this).children('#date').after('<span id="X" class="button">X</span>');
});
$("#X").click(function() {
$(this).parent('.entry').remove();
});
});
</script>
<script src="js/filename.js"></script>
</head>
<body >
<div class="posts">
<div class="entry" id = "4" style="white-space: normal">
<span id="date">１２．１７．２０２１</span>
<hr>
post 4
</div>
<div class="entry" id = "3" style="white-space: normal">
<span id="date">１２．１７．２０２１</span>
<hr>
post 3
</div>
<div class="entry" id = "2" style="white-space: normal">
<span id="date">１２．１７．２０２１</span>
<hr>
post 2
</div>
<div class="entry" id = "1" style="white-space: normal">
<span id="date">０８．０７．２０２１</span>
<hr>
post 1
</div>
</div>
</br>
</body>
Here’s a live version of the page with CSS intact if that helps: https://s-miranda.github.io/log.html