Laravelで複数行明細の実装について

実現したいこと

生のJSで複数行明細を実現したい。
具体的には行の最後に「＋」ボタンを置き、クリックにより、次の行が作成されます。
次の行の最後は「ゴミ箱」ボタンで、クリックにより消去できます。

前提

以前は新規追加行が動作していたが、久しぶりに動作させようとしたところ、動作しなくなっていた。
生のJSで実装していますので、生のJSで実装したいです。

発生している問題・エラーメッセージ

エラーは特に表示されません。

該当のソースコード

文字数の関係でビューは割愛します。

// 新規行追加 ********************************************************************* document.querySelector(".add_row").addEventListener("click", function () { try { const newRow = document.createElement("tr"); newRow.innerHTML = ` <td> <div class="flex items-center"> <x-text-input name="item_id[]" class="block w-24 text-right border-gray-300 rounded-md item_id" type="number"></x-text-input> <x-primary-button type="button" class="h-full ml-1 item_search"><i class="fa-solid fa-magnifying-glass text-white text-xl"></i></x-primary-button> </div> </td> <td> <x-text-input class="block w-96 bg-gray-300 item_name" type="text" name="item_name[]" disabled></x-text-input> </td> <td> <x-text-input class="block w-24 text-right quantity" type="number" name="quantity[]"></x-text-input> </td> <td> <div x-data="sale"> <x-input-select :options="units" name="unit[]" class="block w-24 bg-gray-300 unit" display="name" :disabled="false" /> </div> </td> <td> <x-text-input class="block w-24 bg-gray-300 fees" type="number" name="fees[]" disabled></x-text-input> </td> <td> <input type="hidden" class="handling_decimal"> <x-text-input class="block w-28 text-right bg-gray-300 amount" type="number" name="amount[]" disabled></x-text-input> </td> <td colspan="2"> <div class="flex justify-center"> <x-primary-button type="button" class="h-full custom-red-link w-full del_row"><i class="fa-solid fa-trash text-white text-xl"></i></x-primary-button> </div> </td>`; console.log('newRow:', newRow); // 新しい行に .del_row クラスを持つ要素を追加し、イベントリスナーを設定します newRow.querySelector(".del_row").addEventListener("click", function () { newRow.remove(); }); newRow.querySelector(".item_id").addEventListener("blur", function () { getItemInfo(newRow); }); newRow.querySelector(".item_search").addEventListener("click", function () { const itemModal = document.getElementById("itemModal"); const itemInput = document.getElementById("itemInput"); if (!itemModal.classList.contains("hidden")) { itemModal.classList.add("hidden"); } else { itemModal.classList.remove("hidden"); itemInput.focus(); } }); newRow.querySelector(".quantity").addEventListener("blur", function () { calcTotal(newRow); }); newRow.querySelector(".fees").addEventListener("blur", function () { calcTotal(newRow); }); console.log("Before appending new row"); document.querySelector("#detail_table_body").appendChild(newRow); console.log("After appending new row"); } catch (error) { console.error('Error adding row:', error); } }); });

試したこと

実装当初は動作していました。なので、過去と今の違いを試してみました。
最初はJSファイルにせず、ビューにscriptを直接書いていました。
JSファイルから戻してみたところ、動作しました。

デベロッパーツールで確認したところ、コンポーネントが怪しいとおもいます。
1行目はコンポーネントの親要素inputなどが外側にあるのに、追加に失敗してる行を見るとコンポーネントがむき出しになっています。
（新規行追加ができないというのは、行追加はできているけど、ボタンは追加されないし、inputの高さが短いという状況です）

JSでコンポーネントを利用するときは、使い方があるのでは？と思っています。

補足情報（FW/ツールのバージョンなど）

aws lightsail + Laravel10 です。