0

下記リンク先のように入力欄を追加削除出来るようなプログラムを書いています。

jQueryフォーム追加削除 - Qiita

これをLaravelの機能のコンポーネントのレンダで同じページ内で二か所で使用しようとしていますが、片方をクリックともう片方も作動してしまいます。(一か所だけ入力欄を増やしたいのに、もう一か所の入力欄も増えてしまう)
条件など追加して、一方がクリックされたら、もう一方は動かないみたいなことすればいいのかなと考えていますが、プログラムが全然思いつきません。ご教授いただけたら幸いです。

追記

削除ボタンの非表示
const cloneItemDeleteHidden = function () {
    if ($('.clone_item').length == 1) {
        $('.btn_clone_item_delete_show_confirm_modal').addClass('d-none')
    }
}
項目追加したとき、nameの番号を増やす
const cloneItemChangeElementName = function (cloneItem) {
    cloneItem.find("textarea, input").each(function () {
        let cloneItemIdTableName = $(this).prop('name').match(/[^0-9]+/)
        let cloneItemIdColumnName = $(this).prop('name').match(/[^0-9]+$/)
        let idPlusOne = Number($(this).prop('name').match(/[0-9]+/)) + 1
        $(this).prop('name', cloneItemIdTableName + idPlusOne + cloneItemIdColumnName)
    })
追加ボタンをおしたとき
$('.btn_clone_item_append').on('click', function () {
    let cloneItem = $(this).closest('.clone_item').clone(true)
    cloneItem.find("textarea, input").val('')
    cloneItem.appendTo('.wrap_append_items')
    $(this).addClass('d-none')
    $('.btn_clone_item_delete_show_confirm_modal').removeClass('d-none')
    cloneItemChangeElementName(cloneItem)
})
削除ボタンを押したとき
$('.btn_clone_item_delete_show_confirm_modal').on('click', function () {
    let modalTarget = $(this).data('target')
    let deleteItemNumber = Number($('.btn_clone_item_delete_show_confirm_modal').index(this)) + 1
})
Laravelのblade
<div class="pt-3 px-1 clone_item delete_item">
    <tbody>
        <x-inputs.table-td thClass='get_label get_only_label' label="タイプ{{ $loop->iteration }}">
        <x-inputs.text id="{{ $prefix }}{{ $loop->index }}.タイプ名_name" :input="$type->only('type_name')" />
</x-inputs.table-td>
    </tbody>
</div>
2
  • 質問欄を編集して自分が書いたコードを提示できませんか。長いコードをベタっと張るのではなくて、問題を再現できるだけの必要最低限のサンプルコードでお願いします。
    – WebSurfer
    Commented 2023年12月18日 4:59
  • @WebSurfer コード追加しました。 Commented 2023年12月18日 6:54

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。