Как обратиться к конкретному объекту определенной формы

Question

У меня есть «foreach» в тимелисте, который генерирует карты бутстрапа, для каждой карты я добавил текстовую область и кнопку, которую вы можете использовать для комментирования;после этого я использовал пост-вызов AJAX для комментариев, но я не смог распознать конкретную текстовую область в виде кнопки, на которую нажали, и вставил мой js-код, который работает только для первого элемента (поэтому для первой текстовой области).

! Даже при использовании селектора класса, вставленного в селектор идентификатора, я получаю ту же ошибку: (

$(document).ready(function() {

  // SUBMIT FORM
  $('.form-inline').submit(function(event) {
    // Prevent the form from submitting via the browser.
    event.preventDefault();
    ajaxPost();
  });

  function ajaxPost() {
    // PREPARE FORM DATA
    var formData = {
      description: $('.description-class').val(),
      id: $('.id-class').val()
    }

    // DO POST
    $.ajax({
      type: "POST",
      contentType: "application/json",
      url: "/api/customer/save/" + formData.id,
      data: JSON.stringify(formData),
      dataType: 'json',
      success: function(result) {
        if (result.status == "Done") {
          $("#postResultDiv").html("<p style='background-color:#888E90; color:white; padding:20px 20px 20px 20px'>" +
            "Il commento è stato aggiunto correttamente! <br>" +
            "Commento aggiunto = " +
            result.data.description + "<br>" + "Id: " + result.data.id + "</p>");
        } else {
          $("#postResultDiv").html("<strong>Error</strong>");
        }
        console.log(result);
      },
      error: function(e) {
        alert("Error!")
        console.log("ERROR: ", e);
      }
    });

    // Reset FormData after Posting
    resetData();

  }

  function resetData() {
    $("#description").val("");
  }
})

<table class="table table-bordered">
  <tr th:each="report : ${reports}">

    <form class="form-inline" id="customerForm" method="post">
      <div class="form-group">
        <textarea class="description-class" id="description" name="description" rows="3" cols="70">Write...</textarea>
      </div>
      <div class="form-group">
        <textarea class="id-class" id="id" name="id" rows="3" cols="70" th:text="${report.id}" style="display:none">id</textarea>
      </div>
      <div>
        <input type="submit" value="Comment" style="height: 25px;">
      </div>
    </form>
    </div>
    <div class="postResultDiv" id="postResultDiv">
    </div>

Answer 1

Вы не можете использовать идентификатор, потому что идентификаторы не могут повторяться, так как они должны быть уникальными, вы должны использовать класс, и так как класс содержит несколько элементов, которые вы должны использовать document.getElementsByClassName('class_name')[textBoxNumber]

textBoxNumber может быть 1,2,3 для любого текстового поля, к которому вы не хотите обращаться

И убедитесь, что вы включили jquery cdn или local перед этим кодом js