form input border outline not showing over ajax

Using dark css - mdb.dark.min.css

Using this snippet directly, no issues.

<div class="form-outline form-white mt-3">
    <input type="text" id="incident-number" class="form-control" />
    <label class="form-label" for="incident-number">Enter Incident Number here</label>
</div>

Returning the same input via ajax (2 pages, index.php & index_post) (This is not working)

index.php content

<div id="index-content"></div>

function refresh_Cards() {
    var action = "refresh-cards";
    $.ajax({
         url : "index_post.php",
          type : 'post',
          data : { 
              action : action 
          },
        success : function(data, status){
            $('#index-content').html(data);
         }
    });
  }

index_post.php content

<?php
if ($_POST['action'] === "refresh-cards"){
?>
    <div class="form-outline form-white mt-3">
        <input type="text" id="incident-number" class="form-control" />
        <label class="form-label" for="incident-number">Enter Incident Number here</label>
    </div>
<?php
}
?>

Edit :Saw this and added this code after my ajax and it works

document.querySelectorAll('.form-outline').forEach((formOutline) => {
    new mdb.Input(formOutline).init();
});

*_Expected behavior_*Border outline to be shown when returning input field via ajax

*_Actual behavior_*Border outline not shown

Resources (screenshots, code snippets etc.)