How to get an input's ID and value in Deform sequence of mapping widget with jQuery?

[Steve Piercy]

Cross-posted to Stack Overflow.
https://stackoverflow.com/questions/56624708/how-to-get-an-inputs-id-and-value-in-deform-sequence-of-mapping-widget-with-jqu

In Deform when using a Sequence of Mapping Widgets[1] and the
Add Person button is clicked multiple times, I want to get the
value of the Name input for each Person using jQuery. I know how
to do that when I know the name or id of the input, but Deform
generates a random string and appends it to the input's id
(e.g., deformField6-gL1J38, deformField6-W9OpBV).

I assume that Deform's JavaScript deform.js[2] clones the
prototype and renames ids.

After the prototype is cloned, how would I use jQuery to watch
for a change in the value of the input Name and return that value?

JSFiddle:
https://jsfiddle.net/stevepiercy/pf5z14jw/27

[1] http://demo.substanced.net/deformdemo/sequence_of_mappings/
[2] https://github.com/Pylons/deform/blob/master/deform/static/scripts/deform.js#L67-L79

--steve

------------------------
Steve Piercy, Eugene, OR

[Jonathan Vanasco]

I don't know Deform, but have done some similar things in the past so may be able to offer a hint or two.

1. You can grab the container that all the form elements are in in jquery -

var dom_container = $("#item-deformField1");

2. then, within that node, you can grab each group... ".deform-seq-item"

3. and within each group, you can find the name/age using a jquery selector

'type="text" name="name'

In terms of detecting a change, that's tricky because the dom elements I'd want to bind triggers to are already used.  The best way would be to bind a keypress event to the fields, but they're automatically created by clicking the add-person button. 

I would create a custom function that binds your keypress function to detected text fields, then invokes the `deform.appendSequenceItem` function.  I think this may be doable by binding a setup function to the AddPerson button to overwrite it, and also invoking the proper `deform.addCallback` yourself   https://docs.pylonsproject.org/projects/deform/en/latest/widget.html#widget-javascript

There may be a better way.   I hope there is!  This just popped out to me.

What looks to be relevant bits of the dom structure it makes is below:

<fieldset class="deform-form-fieldset">
 <div class="form-group item-people" title="" id="item-deformField1">
 <label for="deformField1" class="control-label required" id="req-deformField1"> People </label>
 <div class="deform-seq" id="deformField1">
 <div class="deform-seq-container" id="deformField1-orderable">
 <div title="" class="form-group row deform-seq-item item-person" style="display: none;">
 <div class="form-group item-name" title="" id="item-deformField6-KZhZJP" style="display: none;">
 <input type="text" name="name" value="" id="deformField6-KZhZJP" class=" form-control ">
 <div class="form-group item-age" title="" id="item-deformField7-KZhZJP" style="display: none;">
 <input type="text" name="age" value="" id="deformField7-KZhZJP" class=" form-control ">

 <a href="#" class="btn deform-seq-add" id="deformField1-seqAdd" onclick="javascript: return deform.appendSequenceItem(this);">
 <small id="deformField1-addtext">Add Person</small>
 </a>