How append li element inside a ul lists with the same class name?

Question

How can I append a new li element on the right ul ? Each card has a ul and a form .

When I submit the form I append a new li in the ul . Each ul contains .topics class. But this new li is being added over all cards.

I did't find a solution to append this li inside the ul where it was created.

This is my HTML structure

<div class="card" id="card1">
  <div class="card-body">
   <ul class="topics">
       <li>....</li>
       <li>....</li>
       <li>....</li>
   </ul>
  </div>
  <div class="card-footer">
      <form method="post" class="topic-form">
          ....
      </form>
  </div>
</div>

<div class="card" id="card2">
  <div class="card-body">
   <ul class="topics">
       <li>....</li>
       <li>....</li>
       <li>....</li>
   </ul>
  </div>
  <div class="card-footer">
      <form method="post" class="topic-form">
          ....
      </form>
  </div>
</div>

And my JS code

$('form.topic-form').submit( function (e) {
   e.preventDefault();
   var form = $(this)[0];
   $.ajax({
          ...ajax stuff...        
      },
      success: function (json) {
          form.reset();
          $(".topics").append('<li>.....</li>')
      }
   }
}

Answer 1

The problem is this line

$(".topics").append('<li>.....</li>')

...is acting without context, and searching globally. You need to restrict it to the ul related to the form that triggered the event. The most logical way would be to find the form 's nearest .card element and go back in from there.

$(this).closest('.card').find('.topics').append('<li>.....</li>')

Answer 2

You need to specify which .topics you mean. Use $(this) in general (or form in your case) to target to right one.

$(this).closest('.card').find('.topics')

Answer 3

First inside a submit make a reference to your form $currentForm = $(this); then use this last inside Ajax response to inser li

by search parent card then append into found topic as follow:

$currentForm.parents(".card").find('.topics').append('<li>.....</li>');

not that parents() start search with first parent element, when closest() start with the element it self, no such diffrence exept that. so your ajax should look like

$('form.topic-form').submit( function (e) {
      e.preventDefault();
      $currentForm = $(this);
      $.ajax({
            ...ajax stuff...        

       },
       success: function (json) {
            $currentForm.get(0).reset();
            // or $('form#myform').trigger("reset");
            $currentForm.parents(".card").find('.topics').append('<li>.....</li>');
      }
}

Here is a sample Snippet:

 $(function() { $('form.topic-form').submit(function(e) { e.preventDefault(); $currentForm = $(this); setTimeout(function() { let rand = Math.random().toString(36).replace(/[^az]+/g, '').substr(0, 5) $currentForm.get(0).reset(); $currentForm.parents(".card").find('.topics').append(`<li>${rand}</li>`); }, 1000); }); });

 .card { width:45%; display:inline-block; border:1px solid black; vertical-align:top; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="card" id="card1"> <div class="card-body"> <ul class="topics"> <li>FOO from1</li> </ul> </div> <div class="card-footer"> <form method="post" class="topic-form"> <button>add</button> </form> </div> </div> <div class="card" id="card2"> <div class="card-body"> <ul class="topics"> <li>BAR form2</li> </ul> </div> <div class="card-footer"> <form method="post" class="topic-form"> <button>add</button> </form> </div> </div>