javascript — jQuery .show () несколько тегов с одинаковым именем

У меня есть настройки кода JQuery, поэтому при нажатии на диапазон

это скрыто и поле ввода показано его место. Отсюда можно ввести поле ввода и передать значение обратно

.

Моя проблема в том, что если у меня есть несколько диапазонов с одним и тем же именем, только первый диапазон будет скрывать и показывать входные данные, и я хочу, чтобы отображались все диапазоны с одинаковым именем.

Имя диапазонов генерируется динамически из цикла php for (title_ $ i, где $ i — ключ массива), поэтому я не могу вручную переименовать каждый диапазон.

Моя таблица HTML:

<table id="blank">
<tbody>
<tr id="1" class="edit_tr" bgcolor="#ffffff">
<td class="edit_td">
<span id="title_1" class="text"><p>Bed 1</p></span>

<input type="text" value="Bed 1" name="floor_room[1][]" class="editbox" id="title_input_1" style="display: none;">
</td>
<td class="edit_td">
<span id="title_1" class="text"><p>Bed 2</p></span>

<input type="text" value="Bed 2" name="floor_room[1][]" class="editbox" id="title_input_1" style="display: none;">
</td>
</tr>
<tr id="2" class="edit_tr" bgcolor="#f2f2f2">
<td class="edit_td">
<span id="title_2" class="text"><p>Bath</p></span>

<input type="text" value="Bath" name="floor_room[2][]" class="editbox" id="title_input_2" style="display: none;">
</td>
<td class="edit_td">
<span id="title_2" class="text"><p>Bed 1</p></span>

<input type="text" value="Bed 1" name="floor_room[2][]" class="editbox" id="title_input_2" style="display: none;">
</td>
<td class="edit_td">
<span id="title_2" class="text"><p>Bed 2</p></span>

<input type="text" value="Bed 2" name="floor_room[2][]" class="editbox" id="title_input_2" style="display: none;">
</td>
</tr>
</tbody>
</table>

Мой JQuery:

$(".editbox").hide();
$(".text").show();
$(".edit_tr").click(function () {
var ID = $(this).attr('id');
$("#title_" + ID).hide();
$("#title_input_" + ID).show();}).change(function () {

var ID = $(this).attr('id');
var title = $("#title_input_" + ID).val();$("#title_" + ID).html(title);});

// Edit input box click action
$(".editbox").mouseup(function () {
return false
});

// Outside click action
$(document).mouseup(function () {
$(".editbox").hide();
$(".text").show();
});

и работает jsFiddle: http://jsfiddle.net/8resbu2c/