JavaScriptのイベントを可変で行いたい。

Question

前提・実現したいこと

PHP,JavaScript

初歩的な質問で申し訳ないのですが、javascriptの経験がなく全くわからないためご質問させていただきました。

やりたきこととしましては、フォームをphpで動的に作っているのですが、
例えば、フォーム１のカラムの横にある「＋ボタン」を押したとき、フォーム１の中身を埋めるという動作を、フォーム１〜フォーム１０まで行いたいと考えています。
この処理を、下記のコードでフォーム１は埋める事が出来たのですが、１−１０まで行いたいとき、動的にforで回すなどで書く場合に、どう書けばいいのかわかりません。
ご教授いただけますと幸いです。
よろしくお願いいたします。

該当のソースコード

$(document).on('click', '#event1', function(){
    $('input[name="text1"]').val('挿入テキスト');
});
</script>

<form action="name_create"  id="name_create" method="post">
<input type="text" name="text1">
<a href="#" id="event1" name="event1">要素追加</a>

<input type="text" name="text2"><br>
<a href="#" id="event2" name="event2">要素追加</a>

<input type="text" name="text3"><br>
<a href="#" id="event3" name="event3">要素追加</a>

<input type="text" name="text4"><br>
<a href="#" id="event4" name="event4">要素追加</a>

<input type="text" name="text5"><br>
<a href="#" id="event5" name="event5">要素追加</a>
 <button type="submit">作成する</button>
</form>

Javascript
jQuery

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[退会済みユーザー]

どのようなHTMLを出力しているのか不明だと回答できません。

[med]

不足して申し訳ありません。htmlを追加しました。よろしくお願いします。

Answer 1

まずこのHTML構造を改めるのがいい

<input type="text" name="text1">
<a href="#" id="event1" name="event1">要素追加</a>

<input type="text" name="text2"><br>
<a href="#" id="event2" name="event2">要素追加</a>

<input type="text" name="text3"><br>
<a href="#" id="event3" name="event3">要素追加</a>

<input type="text" name="text4"><br>
<a href="#" id="event4" name="event4">要素追加</a>

<input type="text" name="text5"><br>
<a href="#" id="event5" name="event5">要素追加</a>

↓

<input type="text" name="text"><br> // ここだけ<br>がないのは構造に規則性がなくなる
<a href="#" class="event">要素追加</a>

<input type="text" name="text"><br>
<a href="#" class="event">要素追加</a>

<input type="text" name="text"><br>
<a href="#" class="event">要素追加</a>

<input type="text" name="text"><br>
<a href="#" class="event">要素追加</a>

<input type="text" name="text"><br>
<a href="#" class="event">要素追加</a>

$(".event").on('click', function(){
    $(this).prev('br').prev('input').val('挿入テキスト');
});

こうすれば、クリックした要素の前の br, その前の input にアクセスできる。
PHPで出力する際も、数字をインクリメントするという無駄な処理も書かなくていい。

Answer 2

$('input[name^="text"]').val('挿入テキスト');
```**動くサンプル：**[https://jsfiddle.net/9o60nptq/](https://jsfiddle.net/9o60nptq/)

---

【属性セレクタ (E[foo^="bar"])｜セレクタ｜CSS HappyLife ZERO】
[http://zero.css-happylife.com/selectors/attribute_selectors_05.shtml](http://zero.css-happylife.com/selectors/attribute_selectors_05.shtml)

Comments

[med]

早速のご回答ありがとうございます！
自分の説明が分かりづらくて申し訳ありません、、、

イメージとしましては、それぞれのフォームの横に＋ボタンがあり、そのボタンを押したとき、そのフォームだけの中身を追加したいと考えております。

<input type="text" name="text1">
<a href="#" id="event1" name="event1">要素追加</a>

<input type="text" name="text2"><br>
<a href="#" id="event2" name="event2">要素追加</a>

<input type="text" name="text3"><br>
<a href="#" id="event3" name="event3">要素追加</a>

<input type="text" name="text4"><br>
<a href="#" id="event4" name="event4">要素追加</a>

<input type="text" name="text5"><br>
<a href="#" id="event5" name="event5">要素追加</a>

[kei344]

HTMLの構造が確定しているならそれを質問文に追記してください。（質問文は編集できます）また、質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[med]

htmlを<code>タグで追記させていただきました。よろしくお願いします。