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でコンポーネントを利用するときは、使い方があるのでは？と思っています。