Показать сообщение об успехе AJAX success

Я предложил переместить сообщение за пределы цикла, чтобы у вас было только ОДНО сообщение. Вы даже можете показать это в диалоговом окне

Также у вас загружено более одного jQuery. Просто загрузите последний или 3.x, а не оба

1. измените id = "contactForm" на class = "contactForm"
2. HTML-код недействителен. Переместите </ul> до демоверсии div
3. Было бы проще, если бы вы завернули каждый вопрос и демонстрационный div в оболочку, но попробуйте это:

$(document).on('submit', '.contactForm', function(e) {
  e.preventDefault();
  var $currentForm = $(this);

 ...

  success: function(data) {
    $currentForm.hide();
    $currentForm.prevAll(".successMessage:first").show();
  },

Вот скрипка, которую я использовал для тестирования: https://jsfiddle.net/Twisty/gokfth37/41/

HTML

Я сделал несколько прыжков и создал HTML на основе вашего PHP-кода. Здесь вы можете видеть, что мне пришлось много исправлять синтаксис HTML. Вы не должны иметь <ul> с элементами <input> или <div> в качестве детей. Это должны быть только <li> элементы, которые могут содержать другие элементы.

Таким образом, при нажатии кнопки «Добавить заметки» динамически создается форма, которая должна иметь уникальный идентификатор, а все элементы внутри нее должны иметь уникальные идентификаторы. Эта форма будет иметь кнопку «Закрыть», текстовую область, скрытый элемент и кнопку отправки. Когда форма отправлена, данные из формы должны быть отправлены через POST на определенный URL-адрес, и после успешной отправки отобразится примечание об успехе.

JavaScript

$(function() {
  $('.click_notes').on('click', function() {
    $(this).parent().find(".successMessage").hide();
    $(this).hide();
    var that = $(this);
    var tid = $(this).data('question-id');
    var form = $("<form>", {
      id: "contact-form-" + tid,
      action: "submit.php",
      method: "POST",
      class: "comment-form"
    }).submit(function(e) {
      e.preventDefault();
      $.ajax({
        type: $(this).attr("method"),
        url: $(this).attr("action"),
        data: $(this).serialize(),
        success: function(data) {
          console.log("Success");
          $('.comment-form').hide();
          that.parent().find(".successMessage").show();
          that.show();
        },
        error: function(xhr) {
          console.log('An error occurred.');
          console.log(xhr);
        }
      });
    });
    $("<span>", {
      class: "close btn"
    }).html("X").click(function() {
      that.show();
      $(this).parent().hide();
    }).appendTo(form);
    $("<textarea>", {
      required: true,
      cols: "50",
      class: "span10",
      name: "notes"
    }).appendTo(form);
    $("<input>", {
      type: "hidden",
      name: "submitValue",
      value: tid
    }).appendTo(form);
    $("<button>", {
      class: "btn btn-primary",
      id: "submit-notes-" + tid,
      type: "submit"
    }).html("Add Notes").appendTo(form);
    $(this).closest('li').find('.demo').html(form);
  });
});

Одним из преимуществ создания контента с помощью jQuery является то, что вы можете связывать обратные вызовы при создании объекта. Таким образом, вместо того, чтобы возиться с .on(), вы также можете просто вызывать .click() или .submit() прямо при создании объектов. Любой из них работает, но иногда одним легче управлять, чем другим.

В приведенном выше примере мы создаем форму, привязываем к ней обратный вызов submit, добавляем другие элементы и заменяем #demo этим вновь созданным содержимым. Я также добавил несколько дополнительных битов, чтобы скрыть несколько вещей, если они показываются.

Когда вы видите var that = $(this);, это своего рода небольшая хитрость, поскольку мы не хотим путать this в некоторых других обратных вызовах, однако нам может понадобиться сослаться на оригинал this, и мы можем, используя [ 1113]. [тысяча сто двадцать-дв]

Надеюсь, это поможет.