bootstorapのmodalでの値の受け渡しが上手くできません

Question

###前提・実現したいこと
初めて質問いたします。わかりずらいかと思いますがよろしくお願いします。
bootstrapのmodalウインドウ内にui:repeatでjavaのbeanクラスでデータベースより取得したデータをリストにして一覧表示しています。この一覧から選択した値をもとのメイン画面のテキストボックスに渡したいです。渡したい先のリストボックスもrepeatで回して複数表示されています。
###発生している問題・エラーメッセージ

メインで回している一番上のテキストボックスにモーダルで受け取った値をセットすることはできているのですが
2番目以降のテキストボックスに値をセットすることができません。

###該当のソースコード
modalのHTML部分

<div class="modal fade" id="Modal" tabindex="-1"> <ui:repeat var="modalrow" value="#{webBean.dataList}"> <tr> <td width="650"> <input type="text" id="textdata" class="form-control" jsf:value="#{modalrow.textdata}" jsf:readonly="true"/> </td> <td> <button type="button" class="btn btn-primary" jsf:id="selecttext" jsf:value="#{modalrow.textdata}" onClick="setdata(this);" data-dismiss="modal">決定</button> </td> </tr> </ui:repeat> </div>

元の画面のHTML
<ui:repeat var="mainrow" value="#{webBean.mainDataList}">
<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#Modal">
ここの間に上のmodalのHTMLが記述されています
<input type="text" class="form-control" id="maindata" jsf:value="#{row.maintext}" maxlength="50"/>

受け渡しをしているJavaScript

<script type="text/javascript"> function setdata(ele) { var mdinst = ele.value; document.getElementById("maindata").value = mdinst; }; </script>

###試したこと
メインのidをjsfの型にして区別しようとしましたが、jsf:idで作ったidをJavaScript側が認識してくれないようでメイン画面の2番目以降のテキストボックスが指定できていないという形です。
###補足情報(言語/FW/ツール等のバージョンなど)

Comments

[退会済みユーザー]

ID（ identification ）は1ページ中に１つしか指定できません。

Answer 1

テキストボックスのidをjsfの型にして
テキストボックスの位置をモーダルボタンの上に移動
モーダルボタンが押されたときonclickでbuttonのエレメントをscriptに渡し
scriptでprevioussibling.idでテキストエリアのjsfの型のidを取得することができました。
取得したidを変数に格納して該当ソースの"maindata"を変数に書き換えることで
どこのテキストボックスにモーダルのデータを渡すのかを指定することができました。