How to align the filter icon right to each td header-Twitter bootstrap

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="~/Scripts/app/excel-bootstrap-table-filter-bundle.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="~/Content/app/excel-bootstrap-table-filter-style.css" />
<input type="hidden" id="hiddenAnimal" value="Owl, Bear" />
<style type="text/css">
  .filterddl {
    float: right;
    display: none;
    /* position: fixed; */
    margin-left: 21%;
    margin-top: 0%;
    margin-bottom: -6%;
  }

</style>

<div id="filterDropDown" class="dropdown-filter-dropdown" style="display:none;">
  <span class="glyphicon glyphicon-arrow-down dropdown-filter-icon">
    <i class="arrow-down"></i>
  </span>
  <div class="dropdown-filter-content" style="display: block;">
    <div class="dropdown-filter-sort"><span class="a-to-z" data-column="0">Sort A → Z</span></div>
    <div class="dropdown-filter-sort"><span class="z-to-a" data-column="0">Sort Z → A</span></div>
    <div class="dropdown-filter-search">
      <input type="text" class="dropdown-filter-menu-search form-control" data-column="0" placeholder="search">
    </div>
    <div class="checkbox-container">
      <div class="dropdown-filter-item">
        <input type="checkbox" value="Select All" checked="checked" class="dropdown-filter-menu-item select-all" data-column="0"> Select All
      </div>
      @*<div class="dropdown-filter-item"><input type="checkbox" value="Ant" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Ant</div>
      <div class="dropdown-filter-item"><input type="checkbox" value="Barracude" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Barracude</div>
      <div class="dropdown-filter-item"><input type="checkbox" value="Bear" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Bear</div>
      <div class="dropdown-filter-item"><input type="checkbox" value="Crow" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Crow</div>
      <div class="dropdown-filter-item"><input type="checkbox" value="Elephant" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Elephant</div>
      <div class="dropdown-filter-item"><input type="checkbox" value="Frog" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Frog</div>
      <div class="dropdown-filter-item"><input type="checkbox" value="Kookaburra" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Kookaburra</div>
      <div class="dropdown-filter-item"><input type="checkbox" value="Owl" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Owl</div>
      <div class="dropdown-filter-item"><input type="checkbox" value="Salamander" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Salamander</div>
      <div class="dropdown-filter-item"><input type="checkbox" value="Shark" checked="checked" class="dropdown-filter-menu-item item" data-column="0"> Shark</div>*@
    </div>
  </div>
</div>
<table id="table" class="table table-bordered table-intel">
  <thead>
    <tr>
      <th class="filter">Animal</th>
      <th class="filter">Class</th>
      <th class="filter">Collective Noun</th>
      <th class="filter">A Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-bind="Bear">Bear</td>
      <td>Mammal</td>
      <td>Sleuth</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Ant</td>
      <td>Insect</td>
      <td>Army</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Salamander</td>
      <td>Amphibian</td>
      <td>Congress</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Owl</td>
      <td>Bird</td>
      <td>Parliament</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Frog</td>
      <td>Amphibian</td>
      <td>Army</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Shark</td>
      <td>Fish</td>
      <td>Gam</td>
      <td>6</td>
    </tr>
    <tr>
      <td>Kookaburra</td>
      <td>Bird</td>
      <td>Cackle</td>
      <td>7</td>
    </tr>
    <tr>
      <td>Crow</td>
      <td>Bird</td>
      <td>Murder</td>
      <td>8</td>
    </tr>
    <tr>
      <td>Elephant</td>
      <td>Mammal</td>
      <td>Herd</td>
      <td>9</td>
    </tr>
    <tr>
      <td>Barracude</td>
      <td>Fish</td>
      <td>Grist</td>
      <td>10</td>
    </tr>
  </tbody>
</table>

<script>
  $(document).ready(function() {
    $(".filterddl").click(function() {
      $("#filterDropDown").show();
    })
    $('.table-row').hover(function() {
      $(this).addClass('current-row');
    }, function() {
      $(this).removeClass('current-row');
    });

    $("th").hover(function() {
      var index = $(this).index();
      $('.filterddl').remove();
      $(this).append('<span class="filterddl"><i style="font-size:24px" class="fa">&#xf0b0;</i></span>');
      $(this).find(".filterddl").show();
      $("th.filter, td").filter(":nth-child(" + (index + 1) + ")").addClass("current-col");
      $("th.filter").filter(":nth-child(" + (index + 1) + ")").css("background-color", "#999")
    }, function() {
      //$("#filterDropDown").hide();
      var index = $(this).index();
      $(".filterddl").hide();
      $("th.filter, td").removeClass("current-col");
      $("th.filter").filter(":nth-child(" + (index + 1) + ")").css("background-color", "#F5F5F5")
    });
  });
  // Use the plugin once the DOM has been loaded.
  $(function() {
    // Apply the plugin
    //$('#table').excelTableFilter();
  });

</script>