title: Extending object stored in HTML data-xxx element
body: <p>Say I have the following simplified HTML form:</p>
  <pre><code>&lt;form class = 'crud'&gt;
    &lt;div class = 'record' id='record_0'&gt;
      &lt;input id='testa_0' name='testa' class = 'crud-control'&gt;
      &lt;input id='testb_0' name='testb' class = 'crud-control'&gt;
    &lt;/div&gt;
    &lt;div class = 'record' id='record_1'&gt;
      &lt;input id='testa_1' name='testa' class = 'crud-control'&gt;
      &lt;input id='testb_1' name='testb' class = 'crud-control'&gt;
    &lt;/div&gt;
    &lt;div class = 'record' id='record_2'&gt;
      &lt;input id='testa_2' name='testa' class = 'crud-control'&gt;
      &lt;input id='testb_2' name='testb' class = 'crud-control'&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>Within the <code>data-update</code> attribute of the <code>div.record</code> elements, I'm storing the values modified/entered by the user in the input fields in an object <code>{testa: newvalue, testb: othervalue}</code> (until they are submitted to a database -- I'm skipping that submission step here for less code/complexity). I'm updating the data-update attribute using a jquery event handler:</p>
  <pre><code>  $( 'form.crud, table.crud' ).each(function(i,crud) {
  
      $(crud).find('.crud-control').change(function() {
        let $record = $($(this).closest( '.record' ));
        $record.data('update',{...$record.data('update'),...{[$(this).attr( 'name' )]:$(this).val()}});
        
      });
  
    });
  </code></pre>
  <p>This code works, but the <code>$record.data('update', ...</code> looks a little too complicated to be the best solution. Is there a better method to extend a data-xxx stored object with a key/value pair?</p>
  <p>I tried:</p>
  <pre><code>$.extend( $record.data('update'), {[$(this).attr( 'name' )]:$(this).val()})
  </code></pre>
  <p>But this - for some reason, which I fail to understand - updates the <code>data-update</code> attribute for <strong>all</strong> <code>div.record</code>s and not only the one <code>closest()</code> to the <code>input.crud-control</code> updated.</p>
  <p>Any ideas?</p>