Variable Number of Editable Fields in JS/jQuery - php

Question

What I am trying to do is use php to pull a variable number of records from a database. I want to let the user to be able to click on the text and it will switch the text out for an input box and will update the database on submit.
I am aware of how to do this with the onclick attribute, and passing the javascript function the id number that corresponds to the row in the mySQL database. I am trying to determine how I could do this using Unobstrusive Javascript techniques.
Here is the portion of the code that creates the divs, when the user clicks on the zone, account_number, dv or address fields it will switch out the text for the input box as I said above.
while($row = mysql_fetch_array($query)) {
$business_name = $row['business_name'];
$resource_id = $row['resource_id'];
$totaldv += $row['dv'];
if(!in_array($row['zone'], $zoneArray)) {
$zones .= $row['zone'] . " ";
array_push($zoneArray, $row['zone']);
}
$account_numbers .= "
<div>". $row['zone'] . "</div>
<div>" . $row['account_number'] . "</div>
<div>" . number_format($row['dv']) . " kW</div>
<div>" . $row['street_address'] . " " . $row['city'] . ", " . $row['state'] . "</div>
";
}
The problem I am encountering lies in that a customer could have 1 account, or 83 accounts and I need to be able to switch out the correct text for an input box and pass the id of the row from the database to the form. I was thinking of maybe using applying a class to the certain fields?
I have done something like this before, but it was always a static # of inputs, so I was able to hide the text and show the input box which was generated when the page was loaded. Something along the lines of this (granted it was not Unobtrusive)
$content .= "
<tr>
<td width=35><IMG SRC=images/$i.png height=20></td>
<td width=35 id=rank".$i.">$rankImages</td>
<td width=380>
<span id=text".$i." style=\"cursor:pointer;\" onclick=\"editItem($i);\">".$itemArray[$i]."</span>
<span id=$i"."input>
<input id=$i type=text value=".$itemArray[$i].">
<IMG SRC=images/save.png style=\"cursor:pointer;\" onclick=\"saveItem($i);\">
<IMG SRC=images/cancel.png style=\"cursor:pointer;\" onclick=\"cancelEdit($i);\">
</span>
</td>
</tr>";
function editItem(line_num) {
$("#text" + line_num).hide();
$("#" + line_num + "input").show();
}

Answer 1

The way I would go about it would be to use data-* attributes and then access that data using jQuery's .data() function. A shorter, but similar-looking, example of how your HTML might look:
<div class="editable-row" data-row-id="1">
<span class="uneditable">row one</span>
<input type="text" value="row one" />
</div>
<div class="editable-row" data-row-id="2">
<span class="uneditable">row two</span>
<input type="text" value="row two" />
</div>
<div class="editable-row" data-row-id="3">
<span class="uneditable">row three</span>
<input type="text" value="row three" />
</div>
<div class="editable-row" data-row-id="4">
<span class="uneditable">row four</span>
<input type="text" value="row four" />
</div>
And your JavaScript would look like this:
$(document).ready(function () {
$(".editable-row").on("click", function () {
var $this = $(this),
rowId = parseInt($this.data("rowId"), 10);
$this.find("input").show();
$this.find(".uneditable").hide();
// do something with rowId
});
});