Cannot get javascript search filter to work correctly

Question

I'm working on a web page for tumblr to showcase fictional characters, and I want to put in a search feature in which the user could search and the page would bring up only the characters that match the search. I have it half-working; when you search a name, the non-matching characters disappear.

I have two problems.

1. I want it to search for items based on what is included in the "meta" div class tags, not on the entire content of the item.

2. When the non-matching items disappear, I want the matching ones to take the place as if they were the first items, starting from the top left. Right now they just stay where they are on the page.

I've tried numerous tutorials and cannot figure out how to get it to work. Any help would be great.

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();

    $(".grid").children().each(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    })
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search OCs">
<div class="grid">
  <div class="griditem marvel spn mmcu b7s tgw">
    <div class="wombo">
      <img src="https://placecats.com/neo/300/200">
      <div class="name">Alex Romanoff</div>
      <div class="meta">Alex Romanoff, Marvel, Multifandom</div>
      <div class="info">
        <hr>
        <div class="subname">multifandom | anya taylor joy</div><br>
        <i class="fa-regular fa-heart"></i> loki, other<br>
        <a href="">More </a> | <a href="">Tag</a>
        <p>"It must be exhausting always rooting for the anti-hero."</p>
      </div>
    </div>
  </div>
</div>