jQueryで特定のname属性だけ変更したいのに意図していないものまで変更されてしまいます

WordPressのサイトオプション画面を開発しており、ボタンをクリックするとテキストボックスを増やし、name属性をそれぞれ変更したいと考えています。

最初にこのようなHTMLを出しています。

HTML
1<button id="add_image_button" type="button">スライドを追加する</button>
2<div class="form-block" id="form_block[0]">
3	<!-- Closeボタン -->
4    <span class="close" title="Close">-</span>
5	   <input class="clonetarget" type="text" name="imagesliders['slidedata0'][]" value="https://xxxxx.jp/wp-content/uploads/xxx.jpeg" placeholder="画像URL">
6</div>

同じ画面にボタンを用意しており、それをクリックするとname属性を imagesliders['slidedata1']としてたいのですが、どうももともとあるform_block[0]の中のimagesliders['slidedata0']もslidedata1となってしまいます・・・

WordPressではなく、プレーンなテキストファイル.htmlとして切り出してみても同じ結果となってしまい、jQueryの理解不足が原因かと思うのですがどこが間違っているのかが分かりません・・・。
大変恐れ入りますがご指摘いただけませんでしょうか・・？

php
1<script>
2  (function ($) {      
3 $('#add_image_button').on('click', function() {
4    var frm_cnt = 0;
5    var original = $('#form_block\[' + frm_cnt + '\]');
6
7    frm_cnt++;
8	 console.log("frm_cnt:"+frm_cnt);
9    original
10      .clone()
11      .hide()
12      .insertAfter(original)
13      .attr('id', 'form_block[' + frm_cnt + ']') // クローンのid属性を変更。
14      .end()// 一度適用する
15      .find( '.clonetarget').each(function(idx, obj) {
16		console.log("each入りました"+idx);
17			var name = $('input[name="imagesliders[\'slidedata'+ (idx)+'\'][]"]').attr('name','imagesliders[’slidedata'+ (idx+1)+'\’][]');
18			console.log( name[0] );
19			$(obj).val('');
20   });
21
22    // clone取得
23    var clone = $('#form_block\[' + frm_cnt + '\]');
24    clone.children('span.close').show();
25    clone.slideDown('slow');
26
27  });
28
29 })(jQuery);
30  </script>

.find( '.clonetarget').each(function(idx, obj) としている部分で、originalの方子要素を探しに行っているのか？と思い、ここの.find以下はコメントアウトし、最後のclone.slideDownの下に
clone.find('.clonetarget').each(function (idx, obj) {
console.log("each入りました" + idx);
var name = $('input[name="imagesliders['slidedata' + (idx) + ''][]"]').attr('name', 'imagesliders[’slidedata' + (idx + 1) + '\’][]');
console.log(name[0]);
$(obj).val('');
});

});
としても結果は同じでした・・・。

子要素の操作方法が間違っているのかと思うのですが調べても分からず、教えていただけると幸いです・・・。

以上よろしくお願いいたします。

juner

2021/07/06 08:08

.end() は find や filter などによるstack を元に戻す意図であることを理解していますでしょうか？つまり $elm.find('selector').end() === $elm の様な感じ jQuery の clone() も stack される関数で、前の値は文字通り、clone元の要素なのですが、把握していますでしょうか？

ringoringogogo

2021/07/06 08:34

「.end() は find や filter などによるstack を元に戻す意図であること」と全く理解できておりませんでした・・・。今回どのようにしたら良いかも検討がつかないので、end()についてもう少し調べてみることにいたします。ご回答ありがとうございます。

juner

2021/07/06 08:38

多分 .end() しなければ clone() 前の要素の選択にならない筈なので .end() 外せば意図した動作になるとは思います。

ringoringogogo

2021/07/06 08:42

end()を外したのですが同じ結果となってしまいました・・・。

juner

2021/07/06 08:59

とりあえず https://codepen.io/pen/ とかで動作するサンプル作ってみたら回答を得られやすいと思われます。

ringoringogogo

2021/07/06 10:22

こちらに記載してみました！codepen初めて使ったので使い方など間違っていましたら申し訳ありません・・・！ https://codepen.io/ringogogogo_/pen/OJmMrmx

行動規範の内容に同意します

回答2件

自己解決

$(obj).attr('name', 'imagesliders[’slidedata' + (idx + 1) + '\’][]');
とすればいけました！！！
（var name = $('input[name="imagesliders['slidedata' + (idx) + ''][]"]').attr('name', 'imagesliders[’slidedata' + (idx + 1) + '\’][]');としていたところを削除）

codepenを使った方が良いことや、idの名前を簡素化することなど、教えていただいてありがとうございました！！

投稿2021/07/06 11:00

ringoringogogo

総合スコア15