title: jQuery, input elements with the same data attribute value but one is hidden, fill in same data on keyup
body: <p>jQuery, input elements with the same data attribute value but one is hidden, fill in same data on keyup.</p>
  
  <p>I have 2 forms on a page with dynamically created form fields from a database via .NET MVC.
  I have one form visible and one form that is hidden.</p>
  
  <p>I know how to copy, on keyup, the values from one form field to another IF I have known element classes or Id's.  This is not the case on dynamically created fields.  I can not guarantee that all fields will come back in the same order in each form. </p>
  
  <p>So what I did was I created a 'data' attribute and output the "Model.Name" on the input field.   In my case I am lucky enough that the 2 forms have fields with the same "Model.Name" values. So I am able to do a match on that. But since the forms are built dynamically I need a few things to happen and I need some pointers.</p>
  
  <ol>
  <li>I need to know how to copy field inputted values from the visible form fields to their matching hidden form fields with the same "data" attribute value.  I won't necessarily know the actual data-attribute value since the input fields are getting created dynamically.<br>
  How would this work to get the matching form fields.</li>
  </ol>
  
  <p>I have a basic JS Fiddle set up.
  <a href="https://jsfiddle.net/mb91ktbg/6/" rel="nofollow noreferrer">https://jsfiddle.net/mb91ktbg/6/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!--I know the class of the wrapping form --&gt;
   &lt;!--All data values are dynamic, so I don't know then on page load--&gt;
    &lt;div class="masterFieldWrapper"&gt;
      &lt;!--Need to copy these input values to the sub field wrapper input values--&gt;
   &lt;label&gt;Field one&lt;/label&gt;
  &lt;input type="text" data-myattribute="dynamicvalue" /&gt;
  &lt;label&gt;Field Two&lt;/label&gt;
  &lt;input type="text" data-myattribute="dynamicvalue2" /&gt;
  &lt;label&gt;Field Three&lt;/label&gt;
  &lt;input type="text" data-myattribute="dynamicvalue3" /&gt;
  
   &lt;!--I know the class of the sub field wrapper--&gt;
    &lt;!--I would like to copy the inserted values from the parent wrapper fields to the sub field wrapper fields with the same data-myattribute value--&gt;
   &lt;!--I can not assume the fields come back in the same order. This is why I need to use the data attribute value--&gt;
  &lt;div class="subFieldWrapper"&gt;
  &lt;label&gt;Field One&lt;/label&gt;
  &lt;input type="text" data-myattribute="dynamicvalue" /&gt;
    &lt;label&gt;Field Two&lt;/label&gt;
  &lt;input type="text" data-myattribute="dynamicvalue2" /&gt;
    &lt;label&gt;Field Three&lt;/label&gt;
  &lt;input type="text" data-myattribute="dynamicvalue3" /&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery Started but not working. need some help please.</p>
  
  <pre><code>  $(".masterFieldWrapper input").each(function() {
      var fieldVal = $(this).val();
      var fieldDataAttr = $(this).data("myattribute");
      console.log(fieldDataAttr);
      $(this).keyup(function() {
                $(this).parent('.masterFieldWrapper').find(".subFieldWrapper input").data("myattribute").val($(this).val());
      });
  });
  </code></pre>