Append a button with a specific ID returned from PHP is not working

Question

I am appending a button to a row when adding via Ajax and PHP:

var addHistory = function()
{
   var patient_medication = $("#patient_medicationn").val();
   var disease = $("#disease option:selected").text();
   var patient_side_effect = $("#patient_side_effect").val();
   var pid = $("#pid").val();
   var elem = '<button type="button" class="btn btn-danger btn-sm" 
                    id="delete_disease" name="delete_disease"><i class="fa fa-remove"></i>
                  </button>';
   $.ajax({
      url: '../php/history.php',
      data: {pid: pid, patient_medication: patient_medication, disease: 
             disease, patient_side_effect: patient_side_effect},
      type: 'POST',
      dataType: 'TEXT',

      success:function(resp)
      {
         console.log(resp)
         $("#after_th").after("<tr id='resp'><td>"+disease+"</td><td>"+patient_medication+"</td><td>"
      +patient_side_effect+"</td><td>"+elem+"</td></tr>")
      },
      error:function(resp)
      {
          console.log(resp)
      }
})

}

And on click:

$(document).ready(function()
{
   $("#add_history").on('click', addHistory);
});

In my php file:

$addHistory = "INSERT INTO history(patient_medication, patient_side_effect, disease, patient_id, clinic_id)
    VALUES(:patient_medication, :patient_side_effect, :disease, :patient_id, :clinic_id)";
$ExecAddHistory = $conn->prepare($addHistory);
$ExecAddHistory->bindValue(':patient_medication', $patient_medication);
$ExecAddHistory->bindValue(':patient_side_effect', $patient_side_effect);
$ExecAddHistory->bindValue(':disease', $disease);
$ExecAddHistory->bindValue(':patient_id', $pid);
$ExecAddHistory->bindValue(':clinic_id', $clinic_id);
$ExecAddHistory->execute();

$lastId = $ExecAddHistory->lastInsertId();
echo $lastId;

I am echoeing the last insert ID so I can append it to the newly added <tr> and then if directly the user clicked on the remove button, to delete directly if a mistake happened while adding the history.

Now everything working properly and the new row is appending, but it's remove button does not work at all.

The remove button of already existing rows works fine:

$("#delete_disease ").on('click', function()
{
    var elem = $(this).closest('tr');
    console.log(elem)
    var patient_medication_id = $(this).closest('tr').attr('id');
    var pid = $("#pid").val();
    if(confirm("Are you sure that you want to remove the selected history?"))
    {
        $.ajax({
            url: "../php/deleteDiseaseFromHistory.php",
            type: 'POST',
            data: { pmid: patient_medication_id, pid: pid},
            dataType: 'TEXT',
            success:function(resp)
            {
                if(resp="deleted")
                {
                    elem.fadeOut(800, function() {
                        //after finishing animation
                    });
                }
            },
            error:function(resp)
            {
                alert("Please try again");
            }
        });
    }
});

Answer 1

You need

$(document).on('click', '#delete_disease ', function(event)

in place of

$("#delete_disease ").on('click', function()

Since the content has been loaded through AJAX.