I have an array of comments and I want to add an icon to only the commentID that matches the logged in user. How can I achieve this? Here is what I have. I loop through the commentList checking the commentorID and if it matches prepend the div element and if it doesn't don't show that icon. It adds the icon to all, if one elements in the array has the matching id, but I only want it to add the icon to that specific element. How can I extract it in away to still return all but only add the icon to the matching comment.
function renderCommentSection(commentList){
$('.usersComments').empty();
commentList.forEach(function(comments, index){
let myComments = localStorage.getItem('user');
$('.usersComments').append(renderComments(comments));
for(let index = 0; index < commentList.length; index++){
if(myComments == commentList[index].commentorid){
console.log(commentList[index].commentorid, 'Your Comment Detected')
let editsActive = $(`
<div class="edits">
<button class="edit-btn"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></button>
<ul class="edit-options">
<li>Edit<i class="fa fa-pencil-square" aria-hidden="true"></i></li>
<li>Delete<i class="fa fa-trash" aria-hidden="true"></i></li>
</ul>
</div>
`)
$('.userComm').prepend(editsActive);
}else if(myComments !== commentList[index].commentorid){
console.log(commentList[index].commentorid, 'Not your comment');
$('.edits').addClass('inactive')
}
}
})
};