getElementById and multiple forms

I am having this situation with many forms (for instance I show you a coupe of them):

<form method="POST" enctype="multipart/form-data">  
<textarea name="content" id="content" class="form-control" required=""></textarea>
   <input name="code" id="code" type="hidden" value="1180224194">
   <input name="postId" id="postId" type="hidden" value="167">  
   <button class="btn btn-commenta">Say something</button>
</form>
<form method="POST" enctype="multipart/form-data">
   <textarea name="content" id="content" class="form-control" required=""></textarea>
   <input name="code" id="code" type="hidden" value="95959622661">
   <input name="postId" id="postId" type="hidden" value="144">  
   <button class="btn btn-commenta">Say something</button>
</form>

And I have some javascript like this:

<script type="text/javascript">
   $("form").submit(function (e) {
        e.preventDefault();
        var comment = document.getElementById("content").value;
        var postId = document.getElementById("postId").value;
        var code = document.getElementById("code").value;
        if(comment && postId && code){
        $.ajax({
          type: 'POST',
          ...SOME AJAX
        });
        }
        else {
            console.log("error");
            console.log(comment);
            console.log(postId);
            console.log(code);
        }
        return false;
    });
</script>

Everything works fine when I have a single form (or when I use the first one), but when I try to get the values of the inputs in a different form than the first one, I get an error and my fields are empty.

How can I tell the script to select the values (with getElementById) of the submitted form? I tried with "this" but the console tells me "Cannot read property 'getElementById' of undefined".

The id attribute should be unique in the same document, use common classes instead like :

<form method="POST" enctype="multipart/form-data">
  <textarea name="content" class="form-control content" required=""></textarea>
  <input name="code" class="code" type="hidden" value="1180224194">
  <input name="postId" class="postId" type="hidden" value="167">
  <button class="btn btn-commenta">Say something</button>
</form>

Then get the element values using this to refer to the curren form :

var comment = $(".content", this).val();
var postId = $(".postId", this).val();
var code = $(".code", this).val();

Hope this helps.

$("form").submit(function(e) {
  e.preventDefault();
  var comment = $(".content", this).val();
  var postId = $(".postId", this).val();
  var code = $(".code", this).val();

  console.log(comment);
  console.log(postId);
  console.log(code);

  if (comment && postId && code) {
    console.log("ajax query");
  } else {
    console.log("error");
  }
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="POST" enctype="multipart/form-data">
  <textarea name="content" class="form-control content" required=""></textarea>
  <input name="code" class="code" type="hidden" value="1180224194">
  <input name="postId" class="postId" type="hidden" value="167">
  <br>
  <button class="btn btn-commenta">Say something</button>
</form>
<form method="POST" enctype="multipart/form-data">
  <textarea name="content" class="form-control content" required=""></textarea>
  <input name="code" class="code" type="hidden" value="95959622661">
  <input name="postId" class="postId" type="hidden" value="144">
  <br>
  <button class="btn btn-commenta">Say something</button>
</form>