JSFiddle - React, Tailwind, and code Playground

by Rational Rabbit

HTML

<form id="Jack">
<input type="text" class="widget" id="wid" data-name="Sam Deering" data-fav-food="pizza" data-man=true data-noob=false data-stringboolean="true" />
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  
</form>

JavaScript

$(':input','#Jack').not('#AvgPalWgt', '#AvgShipWgt').change(function()
{
var element = this.id;
console.log($('#'+this.id).data('name'));
console.log($('#wid').data('name')); // "Sam Deering"

console.log($('.widget').data().name) // "Sam Deering"
    
console.dir($('.widget').data()); // Object { noob=false, man=true, favFood="pizza", more...}

//identifier with mutiple words (ie data-fav-food="pizza")
console.log($('.widget').data('favFood')); // pizza

//identifier with boolean value (ie noob=false)
console.log($('.widget').data('noob')); // false

//identifier with string boolean value (ie stringboolean="true")
console.log(typeof($('.widget').data('stringboolean'))); // (boolean)
});