JSFiddle - React, Tailwind, and code Playground

by 0cool

HTML

<div class="hideit">
<input name="attributes[1][]" value="Size"><br>
<input name="attributes[2][]" value="Color"><br>
<input name="attributes[3][]" value="Material"><br>

<input name="options[1][]" value="Small"><br>
<input name="options[1][]" value="Medium"><br>
<input name="options[1][]" value="Large"><br>
<input name="options[1][]" value=""><br>

<input name="options[2][]" value="Red"><br>
<input name="options[2][]" value="Green"><br>
<input name="options[2][]" value="Blue"><br>
<input name="options[2][]" value=""><br>

<input name="options[3][]" value="Cotton"><br>
<input name="options[3][]" value="Wool"><br>
<input name="options[3][]" value=""><br>
</div>
    <p id="inputNames" ></p>

CSS

.hideit {
    display : none;
}

JavaScript

// open the console (F12) and >Run the script to see result

var yourSampleData;
var simulateDinamicUpdates; 

simulateDinamicUpdates =
( function ( attributes, options, randint ) {
  
  var inputNames = 
  document.getElementById("inputNames");
  
  var tmp = 
  [11,12,13].sort( function () { return Math.random() - .5; } );
    
    return function () {
     attributes
     .forEach(
      function ( input ) {
        input.name = 
        "attributes["+ tmp.shift() + "][]";
        inputNames.innerHTML += "<span>"+ input.name +"</span><br>";
      }
     );
     inputNames.innerHTML += "<br>";
     options
     .forEach(
      function ( input ) {
        input.name = "options["+ randint( 11, 13 ) +"][]";
        inputNames.innerHTML += "<span>"+ input.name +"</span><br>";
      }
     );     

  };

} )(
  Array.prototype.filter.call(
    document.getElementsByTagName("input"),
    function ( input ) {
      return String( input.name ).indexOf("attributes") != -1;
    }
  ),
  Array.prototype.filter.call(
    document.getElementsByTagName("input"),
    function ( input ) {
      return String( input.name ).indexOf("options") != -1;
    }
  ),
  function ( n1, n2 ) {
    return ( n1 + Math.round( ( n2 - n1 ) * Math.random() ) );
  }
);

simulateDinamicUpdates();

yourSampleData =
( function ( allInputs, _, _out, _trimstr, _attrIdxs ) {

  _attrIdxs( allInputs )
  .forEach(
    function ( idx ) {
      _out.push(
        _.filter.call(
          allInputs,
          function ( input ) {
            return ( new RegExp("^options\\[" + idx + "\\]") )
                    .test( String( input.name ) )
                    && _trimstr( input.value ).length;
          }
        )
        .map(
          function ( validinput ) {
            return _trimstr( validinput.value );
          }
        )
      );
    }
  );

  return _out;

} )(
    document.getElementsByTagName("input"),
    Array.prototype,
    [],
    ( function () {
        var blanks =...