Update dynamically generated list item (generated using PHP) after ajax call
<p>The following HTML code is being <strong><code>echo</code>ed</strong> using a while loop in PHP which is adding a list item after fetching data from database.</p>

<p><strong>PHP:</strong></p>

<pre><code>echo '
&lt;li&gt;

  &lt;div class="collapsible-header"&gt;

    &lt;div class = "left"&gt;
      &lt;div class = "issueStatusIcon" style = "background-color:'.$smallCircleColor.';"&gt;'.$smallMsg.'&lt;/div&gt;
      &lt;span class = "issueTitle" style = "font-family: robotoBold"&gt;'.$issueTitle.'&lt;/span&gt;
    &lt;/div&gt;

    &lt;div class = "issueButtonsGroup"&gt;
      &lt;form id = "archiveIssueForm'.$i.'" issue-name = "'.$issueTitle.'" action = "archiveIssue.php"&gt;
        &lt;input type = "hidden" value = "'.$issueID.'" name = "issueID"/&gt;
      &lt;/form&gt;
      &lt;a class = "right archiveIconButton" onclick = "ajaxIssueArchive('.$i.')" href = "#"&gt;
          &lt;i class="material-icons black-text issueOptions archiveIcon"&gt;archive&lt;/i&gt;
      &lt;/a&gt;
      &lt;a class = "right"&gt;&lt;i class="material-icons black-text issueOptions"&gt;edit&lt;/i&gt;&lt;/a&gt;
    &lt;/div&gt;

  &lt;/div&gt;                          

&lt;/li&gt;                  
';
</code></pre>

<p><br><br><strong>This is the preview image of the generated list:</strong>
<a href="https://i.stack.imgur.com/n4NuD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n4NuD.png" alt="preview image"></a></p>

<p>Notice the cursor over the <em>archive button</em> which archives the list item. The <code>class</code> for that button is <code>archiveIconButton</code> <em>(you can find it in the above code)</em>. When the button is clicked, <code>archiveIssueForm</code> is submitted via AJAX (each form has a unique identifier variable <code>$i</code> appended to its id).</p>

<p>Following is the JQuery AJAX code:</p>

<p><strong>JQuery:</strong></p>

<pre><code>&lt;script&gt;
  function ajaxIssueArchive($num){

    $.ajax({
      type: "post",
      url: "archiveIssue.php",
      data: $('#archiveIssueForm' + $num).serialize(),

      success: function(data){

        $fetchIssueName = $('#archiveIssueForm' + $num).attr("issue-name");
        $toastText = $fetchIssueName + " has been archived";
        Materialize.toast($toastText, 3000);
        $('#archiveIssueForm' + $num).html(data);
      }
    });

  }
&lt;/script&gt;
</code></pre>

<p>After archiving any list item, it gets deleted from the database. I want to update the <code>ul</code> element which contains these list items so that the list item which gets deleted doesn't gets displayed after the AJAX form submission. </p>

<p>Assume the id of ul to be <code>issueListUL</code>.</p>

<p>What i'm currently getting is the whole code of the html page displayed in the li item. I am certainly doing something wrong, any help would be appreciated!</p>

<p><strong>After archiving a list item:</strong>
<a href="https://i.stack.imgur.com/Gzgzb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gzgzb.png" alt="preview image 2"></a></p>