ajax success div with same name problem

ajax success div with same name problem

I have a while loop writing rows from the database as separate forms on a page.  Works fine.  It writes a hidden div just before each closing form tag.  They all have same div id.  I call a success function that fills in this hidden div with a success messages.  Problem is no matter what form I choose the output always gets written to the first form on the page.  I have to somehow determine what form was clicked and then tell the success function to use that div name.  Not sure how to go about that.

  2. <form>
  3. <input type="radio" name="contract" value="0" class="custom-switch-input">
  4. <input type="radio" name="contract" value="1" class="custom-switch-input">
  5. <input type="radio" name="contract" value="2" class="custom-switch-input">

  7. <div class="alert alert-icon alert-success" role="alert" id="output" style="display: none">
  8. <i class="fe fe-check mr-2" aria-hidden="true" ></i> The contract status has been updated successfully.</div>
  9. </form>

  12. $(document).ajaxSuccess(function()
  13. {
  14. $("#output").fadeTo(4000, 500).slideUp(500, function(){
  15.         $("#output").slideUp(500);

  17.      });
  19.  });