下記リンク先のように入力欄を追加削除出来るようなプログラムを書いています。
これを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>