Javascriptでnameの値を取得し繰返処理

質問

wordpressで画像アップロードをJavascriptを使用して作成していますが、Javascriptのスマートな繰返処理の仕方を教えていただけないでしょうか。

現状は以下のように記述しており、正常に動作していますが、画像アップロードの項目を複数にしたく思います。
単純に下記のHTMLとJavascriptのセットを必要な数分増やせばできると思いますが、HTMLの項目を増やして、「media01」「media02」「media03」、「manager01」「manager02」「manager03」と数字部分が増やしたときにJavascriptは書き換えずにそれぞれ対応したものに値を返すようにしたいです。

クラスを取得して変数として保存して渡せば良いのだとは思うのですが、、、
Javascriptはまだまだわからないことだらけなのでお知恵を拝借できれば幸いです。

▼HTML
---------------------------------------------
<input name="manager01" type="text" readonly="readonly" value="<?php echo get_option('manager01'); ?>" />
<input type="button" name="media01" value="選択" />
<input type="button" name="media-clear" value="クリア" />
<div id="media"></div>
---------------------------------------------

▼Javascript
---------------------------------------------
(function ($) {
var custom_uploader;
$("input:button[name=media01]").click(function(e) {
e.preventDefault();
if (custom_uploader) {
custom_uploader.open();
return;
}
custom_uploader = wp.media({
title: "Choose Image",
/* ライブラリの一覧は画像のみにする */
library: {
type: "image"
},
button: {
text: "Choose Image"
},
/* 選択できる画像は 1 つだけにする */
multiple: false
});
custom_uploader.on("select", function() {
var images = custom_uploader.state().get("selection");
/* file の中に選択された画像の各種情報が入っている */
images.each(function(file){
/* テキストフォームと表示されたサムネイル画像があればクリア */
$("input:text[name=manager01]").val("");
$("#media").empty();
/* テキストフォームに画像の ID を表示 */
$("input:text[name=manager01]").val(file.id);
/* プレビュー用に選択されたサムネイル画像を表示 */
$("#media").append('<img src="'+file.attributes.sizes.thumbnail.url+'" />');
});
});
custom_uploader.open();
});
/* クリアボタンを押した時の処理 */
$("input:button[name=media-clear]").click(function() {
$("input:text[name=manager01]").val("");
$("#media").empty();
});
})(jQuery);

回答No.1

int3

別にname使わなくてもよいので、同じ意味のものであればclassとか使えばいいんじゃないでしょうか。
01とか可変の部分もdataとかにいれとけば簡単かなと。

例えばhtmlはこんなで
<input name="manager01" type="text" readonly="readonly" value="<?php echo get_option('manager01'); ?>" class="manager" data-id="01" />
<input type="button" name="media01" value="選択" class="media_select" data-id="01" />

javascriptのところはこんなとか
<input name="manager01" type="text" readonly="readonly" value="<?php echo get_option('manager01'); ?>" class="manager" data-id="01" />
<input type="button" name="media01" value="選択" class="media_select" data-id="01" />

$("input.media_select").click(function(e) {
selected_id = $(this).data('id');
...
$("input:text[name=manager" + selected_id + "]").val("");
$("input:text[name=manager" + selected_id + "]").val(file.id);

$("input:button[name=media-clear]").click(function() {
if(selected_id){
$("input:text[name=" + selected_id +"]").val("");
}