Unable to target and remove appended element in jquery or Javascript

Here’s what I’m trying to do here –

  1. Take input from a form field and append the data in a div option-badges
  2. The badges have X button that I’m using to remove the items clicked if needed

What’s the problem?
With the code I’ve written, I’m unable to remove the said appended badge while I’m easily able to remove the badges which were there already.

Here’s the code. Please help me with this. Thanking in anticipation.

$(document).ready(function() {
  //take input data from first input field and display comma separated in second field
  let dataList = [];
  let dataString = "";
  $("#addData").on('click', function() {
    let data = $("#firstInput").val();
    let dataBadge = '<span class="badge badge-secondary" style="margin-left: 5px;">' +
      data + ' &nbsp <i id="newBadge" class="fa-solid fa-xmark" ></i></span>';
    $('.option-badges').append(dataBadge);
    $("#firstInput").val('');
  })

  //remove badge on clicking x
  $(".option-badges > span > i").on("click", function() {
    $(this).parent().remove();
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css"  />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"  />
<div class="option-badges">
  <span class="badge badge-secondary" style="margin-left: 5px;">data  <i class="fa-solid fa-xmark"></i></span>
  <span class="badge badge-secondary" style="margin-left: 5px;">data  <i class="fa-solid fa-xmark"></i></span>
</div>

–