单击标题时重复

美好的一天，我正在显示一个表格，其中的内容是从PHP/MySQL中提取的。当鼠标悬停在桌子的头部时，会出现一个小的向下箭头，并在鼠标离开时消失。我希望能够通过点击标题对列进行排序。出于某种原因，当我点击一些列（不总是相同！）时，我在控制台中看到了2次结果（请参见截图）。这里是我的代码：单击标题时重复

<table id="db" style="white-space:nowrap;display:block;margin:5px;"> 
    <tr> 
     <th id="sortByName" style="border:1px solid black;text-align:center;">Name</th> 
     <th id="sortByFname" style="border:1px solid black;text-align:center;">Firstname</th> 
     <th id="sortByTel" style="border:1px solid black;text-align:center;">Tel</th> 
     <th id="sortByZip" style="border:1px solid black;text-align:center;">ZIP Code</th> 
     <th id="sortByDate" style="border:1px solid black;text-align:center;">Birth Date</th> 
    </tr> 
    <tbody> 
     ... 
    </tbody>  
</table>

的Javascript部分：

$("#db th").hover(function() { 
     $(this).append("<i class='fa fa-caret-down' aria-hidden='true'></i>"); 
     $(this).click(function (e){ 
      e.preventDefault(); 

      var capture = $(this).attr('id'); 
      console.log("Captured: " + capture); 

    }, function() { 
     $(this).children("i").remove(); 
    }); 
}

和控制台的屏幕捕获：