JSFiddle - React, Tailwind, and code Playground

HTML

<form id="myForm">
    <input type="text" name="Name" />
    <input type="checkbox" name="Feature.Translate" />
    <input type="checkbox" name="Feature.Share" />

    <input id="convert" type="button" value="Convert into an object" />
</form>

JavaScript

function serializeData() {
        //this is where we'll store our serialized data
        var serializedData = {};
        
        //iterate over input, select, and textarea elements
        jQuery("input, select, textarea").each(function(index) {
           var $element = jQuery(this);
           var name = $element.attr("name");
       
           //we only want to serialize the element if it has a 'name' attribute
           if(typeof name != "undefined") {

              //split on the . to get an array
              var parts = name.split(/\./);
     
              //start building the serialized data
              var currentPart = serializedData;
              for(var i = 0; i < parts.length; i++) {

                  //if this particular element doesn't already exist in our hash, create it
                  //and initialize it to an empty hash
                  if(typeof serializedData[parts[i]] == "undefined") {
                      currentPart[parts[i]] = {};
                  }
               
                  //if we're currently looking at the very last element in the array then
                  //it means that we need to set its value to the value of the corresponding
                  //input element. Otherwise, it means that there are still keys within the
                  //array and so we set `currentPart` to the new hash that we just created
                  if(i == parts.length - 1) {
                      console.log($element.get(0).tagName.toLowerCase());
                      if($element.attr("type").toLowerCase() == "checkbox" || $element.attr("type").toLowerCase() == "radio") {
                          currentPart[parts[i]] = $element.is(":checked");
                      }
                      
                      else {
                         currentPart[parts[i]] = $element.val();
                      }
                  }
                  
                  else {            
                      currentPart =...