querySelecterAllで取得した要素に対して特定の要素だけにメソッドをかけたい

ruby初心者です。質問させていただきます。

ruby on rails とJavaScriptで簡単なシステムを作っています。
削除ボタンを実装中に以下の問題が発生しました。

JSのaddEventListnerのmouseover,mouseoutを使って削除ボタンが対象の部分にマウスが乗っているときだけ表示させるようにしたいです。

例えば画像の「ごりら２」の上にマウスが乗っているときに「ごりら２」の部分だけに表示させたいのですが

このように「ごりら２」にマウスを乗せると下の「ライス」にも削除ボタンが表示されてしまいます。
document.querySelecterAllを使い、対象のクラスを取得してforEachでaddEventListnerをかけています。

【HTML】
<% @nutritions.each do |nutrition| %>
<tr height="60" class="content-post">
<td class="ingredient-column" id="ingredient-column"><%= nutrition.ingredient %>
<div class="more" id="more">
<ul class="more-list" id="more-list">
<li>
<%= link_to '削除', nutrition_path(nutrition.id), method: :delete, data: { confirm: '削除しますか？'} %>
</li>
</ul>
</div>
</td>
<td><%= nutrition.protein %></td>
<td><%= nutrition.lipid %></td>
<td><%= nutrition.carbohydrate %></td>
</tr>
<% end %>
</table>

【JS】

window.addEventListener('load', function(){
const deleteButton = document.querySelectorAll(".more-list")
const ingredientColumn = document.querySelectorAll(".ingredient-column")

ingredientColumn.forEach(function(column){

deleteButton.forEach(function(list){
  column.addEventListener('mouseover', function(){
    list.setAttribute("style", "display:block;")
  })

  column.addEventListener('mouseout', function(){
    list.removeAttribute("style", "display:none;")
  })
})