setting unique data attributes and ids for fields hidden by common class

setting unique data attributes and ids for fields hidden by common class

There's an unworking fiddle for this question that'll probably show you
what I'm trying to do better than the explanation below.
http://jsfiddle.net/mjmitche/RRXnK/330/
I have a form with visible form labels, and a button below each label that
the user should be able to click to display the form field, which is
hidden using css. Each form field is hidden with the class
I love to play the piano. <-this is a form label
Click to Open Form <- this is a button that opens invisible form field
I practice five hours every day. <-this is a form label
Click to Open Form <- this is a button that opens invisible form field
This is the css that hides the form fields
.span5.invisiblekey {
display: none;
}
I want to click the button below each label and display the form field
associated with each label. This is the JavaScript (using Backbone), but I
can't figure out how to link the button with each specific form field so
that only one form field is displayed when each respective button is
clicked.
If possible, would you kindly help me figure out what to set in the ids
and data-attributes of the form so that the JavaScript in showForm method
can display the right form field?
var FormView = Backbone.View.extend({
el: '#formscript',
events: {
'click .fix': 'showForm'
},
showForm: function () {
alert("form clicked");
}
});
var form_view = new FormView();
This is the html. There is some flexibility as to what I can set the data
attributes and ids
<div id="formscript">
<div class="row">
<p class="span3">
<label for="title">I love to play the piano.</label>
<a class="btn btn-small btn-warning fix"
data-i-love-to-play-the-piano="i-love-to-play-the-piano"
href="#">Click to Open Form</a>
</p>
<p class="span3">
<input class="span5 invisiblekey"
data-i-love-to-play-the-piano="i-love-to-play-the-piano"
id="i-love-to-play-the-piano" name="i-love-to-play-the-piano"
type="text" value="">
</p>
</div>
<div class="row">
<p class="span3">
<label for="I_practice_five_hours_every_day.">I practice five
hours every day.</label>
<a class="btn btn-small btn-warning fix"
data-i-practice-five-hours-every-day="i-practice-five-hours-every-day"
href="#">Click to Open Form</a>
</p>
<p class="span3">
<input class="span5 invisiblekey"
id="i-practice-five-hours-every-day"
name="i-practice-five-hours-every-day" type="text" value="I
practice five hours every day.">
</p>
</div>
</div>//formscript id