Adding comments to images I'm working on an interview code sample in Javascript, which is not my first language.  The task is simple enough:  Given a webpage with a variety of images, allow the users to add comments.  The code to generate and manage the images was given to me; my task was to build out comment.js and comments.controller.js.  Everything works and I'm happy with it, but since JS is not my first choice I don't know if there's any glaring errors I'm missing.  Please be as nitpicky as possible.  

Most of my code is in the following two files.  The rest can be viewed at https://github.com/paulnicholsen27/flatiron but I do not need feedback on any of those (I didn't write them)--it just may be helpful to run the entire program rather than piecemeal.  I don't know how you brave altrusitic wizards operate most effectively.

comment.js

function Comment(imageId, text) {
    this.id = this.constructor.all.length;
    this.imageId = imageId;
    this.text = text;
    this.constructor.all.push(this);
}

Comment.all = [];

Comment.prototype.buildCommentEl = function() {
    return $(`&lt;li id='comment-${this.id}'&gt;${this.text}&lt;/li&gt;`);
}


comments.controller.js

class CommentsController {
  constructor() {
    this.$addCommentForm = $('.add-comment')
  }

  init() {
    $(".add-comment").each((index, element) =&gt; {
        element.addEventListener("submit", this.addCommentFormListener);
    })
  }
}

CommentsController.prototype.addCommentFormListener = function(e){
    e.preventDefault();
    var image = $(this).closest(".image");
    var imageId = Number(image.find("ul").attr("data-id"));
    var commentForm = $(this).find('input[name="comment-description"]')
    var commentContents = commentForm.val();
    if (commentContents.length) {
       var newComment = new Comment(imageId, commentContents);
       CommentsController.render(newComment);
       commentForm.val("");  // reset comment form
    }
}



CommentsController.render = function(newComment){
    var imageId = newComment.imageId;
    var image = Image.all.find(image =&gt; image.id === Number(imageId));
    image.comments.push(newComment);
    var commentList = $(`#comments-${imageId}`);
    var commentEl = newComment.buildCommentEl();
    commentList.append(commentEl);
}
Your link has an assignment description, which I assume you have to follow, and I'll do so too. It says to use ES6 and class, but you have only used class for one of these, and even then you still use .prototype. You also shouldn't be using var, use let and const instead.

Comment class

Use class syntax. Save the image object instead of the imageId. Make the findImage function. commentEl should return a string, not a jQuery object.

class Comment {
    constructor(imageId, text) {
        this.id = Comment.all.length;
        this.image = this.findImage(imageId);
        this.text = text;
        Comment.all.push(this);
    }

    findImage(imageId) {
        const image =  Image.all.find(image =&gt; image.id === Number(imageId));
        image.comments.push(this);
        return image;
    }

    commentEl() {
        return `&lt;li id='comment-${this.id}'&gt;${this.text}&lt;/li&gt;`;
    }
}

Comment.all = [];


CommentsController class

Use class syntax. Remove $addCommentForm since it's never used. addCommentFormListener doesn't add a listener, it is a listener (or handler, if you will). init is the one actually adding the listener. render can be simplified, since part of it is being done elsewhere. It is also being used like a static method.

class CommentsController {
    constructor() {
        this.addCommentFormListener();
    }

    addCommentFormListener() {
        $(".add-comment").each((index, element) =&gt; {
            element.addEventListener("submit", commentFormHandler);
        });
    }

    static render(commentObject) {
        const commentList = $(`#comments-${commentObject.image.id}`);
        commentList.append(commentObject.commentEl());
    }
}

// This could also be part of the class
function commentFormHandler(e) {
    e.preventDefault();
    const image = $(this).closest(".image");
    const imageId = Number(image.find("ul").attr("data-id"));
    const commentForm = $(this).find('input[name="comment-description"]')
    const commentContents = commentForm.val();
    if (commentContents.length) {
        const newComment = new Comment(imageId, commentContents);
        CommentsController.render(newComment);
        commentForm.val("");
    }
}


I'm not a fan of the way you're getting the imageId and comment. It's tied too much to the DOM and a bit confusing. But that's beyond this question.