Ajax function not working properly for delete and update comments - node.js

Question

I'm using Ajax in a comments section in my blog project. It was working fine however clearly I've changed something because now when I go to edit a comment it won't work and when I try to delete, it does destroy the comment but it also gets rid of a load of other comments until I refresh the page when everything looks fine. The only Ajax function now working is create new comment.
Here's my show page code for my comments section:
<!--================== COMMENTS DISPLAY SECTION ====================================================================-->
<div id="comments">
<% blog.comments.forEach(function(comment){ %>
<div class="comment-container">
<div class="jumbotron comment">
<div class="row">
<div class="col-md-1">
<img class="comment-ico" src = "<%=comment.author.image%>">
</div>
<div class="col-md-7">
<h4><%=comment.author.username%></h4>
</div>
</div>
</div>
<div><p><%=comment.text%></p></div>
<!--=================EDIT COMMENT FORM =========================================================================-->
<form id="edit-comment-form" action = "/blogs/<%= blog._id %>/comments/<%=comment._id%>?_method=PUT" method = "POST" id="newComment">
<textarea class = "form-control" rows="4" name = "comment[text]"><%=comment.text%></textarea>
<button class = "btn btn-lg btn-primary btn-block">Submit</button>
</form>
<!--==================================================================================================================-->
<!-- if current user is the same as author -->
<% if(currentUser && currentUser.username == comment.author.username) { %>
<div class="row">
<div class="col-md-1 choice">
<a class="edit">Edit</a>
</div>
<div class="col-md-1">
<form id = "delete-form" action = "/blogs/<%= blog._id %>/comments/<%=comment._id%>?_method=DELETE" method = "POST">
<input type = "submit" class = "button-delete" value = "Delete"></form>
</div>
<% } %>
<% if(currentUser && currentUser.username == comment.author.username) { %>
<div class="col-md-1 choice-report">
<a class="report">Report</a>
</div>
<% } else { %>
<div class="col-md-1 choice-no-user">
Report
</div>
<% } %>
</div>
<br>
<hr class = "style-three">
<% }) %>
</div>
</div>
</div>
<!--==================================================================================================================-->
<% if(currentUser){ %>
<div class = "container-form">
<form action = "/blogs/<%= blog._id %>/comments" method = "POST" id="newComment">
<div class="row">
<div class="col-md-2">
<img class="newComment-ico" src = " <%=currentUser.image%>">
</div>
<div class="col-md-10">
<label for="comment">Add comment</label>
</div>
</div>
<textarea class = "form-control" rows="4" placeholder = "Type comment here..." name = "comment[text]"></textarea>
<button class = "btn btn-lg btn-primary btn-block">Submit</button>
</form>
</div>
<% } %>
And my Ajax code:
// update comment
$('#comments').on('submit', '#edit-comment-form', function(e){
e.preventDefault();
// get info from form
var formData = $(this).serialize();
var formAction = $(this).attr('action');
var $originalItem = $(this).parent('.comment-container');
$.ajax({
url: formAction,
data: formData,
type: 'PUT',
originalItem: $originalItem,
success: function(data) {
var blog_id = location.pathname.replace("/blogs/", "");
this.originalItem.html(
`
<div class="comment-container">
<div class="jumbotron comment">
<div class="row">
<div class="col-md-1">
<img class="comment-ico" src = "${data.author.image}">
</div>
<div class="col-md-7">
<h4>${data.author.username}</h4>
</div>
</div>
</div>
<div><p>${data.text}</p></div>
<form id="edit-comment-form" action = "/blogs/${blog._id}/comments/${data._id}?_method=PUT" method = "POST" id="newComment">
<textarea class = "form-control" rows="4" name = "comment[text]">${data.text}</textarea>
<button class = "btn btn-lg btn-primary btn-block">Submit</button>
</form>
<div class="row">
<div class="col-md-1 choice">
<a class="edit">Edit</a>
</div>
<div class="col-md-1">
<form id = "delete-form" action = "/blogs/${blog._id}/comments/${data._id}?_method=DELETE" method = "POST">
<input type = "submit" class = "button-delete" value = "Delete"></form>
</div>
<div class="col-md-1 choice-report">
<a class="report">Report</a>
</div>
</div>
<br>
<hr class = "style-three">
`
);
}
});
});
And here's the update comments route:
// comment update route
router.put("/:comment_id", function(req, res){
Comment.findByIdAndUpdate(req.params.comment_id, req.body.comment, {new: true}, function(err, updatedComment){
if(err) {
res.redirect("back");
} else {
if(req.xhr);
res.json(updatedComment);
// } else {
// res.redirect("/blogs/" + req.params.id);
// }
}
})
})
My destroy Ajax code:
// delete comments asynchonously
$('#comments').on('submit', '#delete-form', function(e){
e.preventDefault();
var confirmResponse = confirm('Are you sure you want to delete this comment?');
if(confirmResponse){
var actionURL = $(this).attr('action');
$itemToDelete = $(this).closest('.comment-container');
$.ajax({
url: actionURL,
type: 'DELETE',
itemToDelete: $itemToDelete,
success: function(data){
this.itemToDelete.remove();
}
})
} else {
$(this).find('input').blur();
}
})
And destroy route:
// comments destroy route
router.delete("/:comment_id", function(req, res){
Comment.findByIdAndRemove(req.params.comment_id, function(err, comment){
if(err) {
res.redirect("back");
} else {
res.json(comment);
}
})
})
UPDATE:
I noticed a couple of errors on my Ajax code whereby I had referenced ${blog._id} rather than ${blog_id}. I've updated as follows:
// update comment
$('#comments').on('submit', '#edit-comment-form', function(e){
e.preventDefault();
// get info from form
var formData = $(this).serialize();
var formAction = $(this).attr('action');
var $originalItem = $(this).parent('.comment-container');
$.ajax({
url: formAction,
data: formData,
type: 'PUT',
originalItem: $originalItem,
success: function(data) {
var blog_id = location.pathname.replace("/blogs/", "");
this.originalItem.html(
`
<div class="jumbotron comment">
<div class="row">
<div class="col-md-1">
<img class="comment-ico" src = "${data.author.image}">
</div>
<div class="col-md-7">
<h4>${data.author.username}</h4>
</div>
</div>
</div>
<div><p>${data.text}</p></div>
<form id="edit-comment-form" action = "/blogs/${blog_id}/comments/${data._id} method = "POST" id="newComment">
<textarea class = "form-control" rows="4" name = "comment[text]">${data.text}</textarea>
<button class = "btn btn-lg btn-primary btn-block">Submit</button>
</form>
<div class="row">
<div class="col-md-1 choice">
<a class="edit">Edit</a>
</div>
<div class="col-md-1">
<form id = "delete-form" action = "/blogs/${blog_id}/comments/${data._id}?_method=DELETE" method = "POST">
<input type = "submit" class = "button-delete" value = "Delete"></form>
</div>
<div class="col-md-1 choice-report">
<a class="report">Report</a>
</div>
</div>
<br>
<hr class = "style-three">
`
);
}
});
});
Now the comment will update asynchronously, however until the page is refreshed, again it's kicking off a load of other comments.Essentially it's getting rid temporarily of all comments beneath the one being edited. When you refresh though, all comments re-appear in the correct order including the edits made to the comment in question