JSFiddle - React, Tailwind, and code Playground

by Robin Huy

HTML

<div id='tab-1'>
  <textarea id='template-code' cols='67' rows='27'></textarea>
  <button id='submit-code'>Submit Code</button>
</div>

<div id='tab-2' class='unactive'>
  <form id='settings-form' method='POST'>
    <div id='result'></div>
    <button id='update-code'>Update Code</button>
  </form>
</div>

CSS

.unactive {
    display: none
}

JavaScript

$('#template-code').change(function (){
        
  var $that = $(this),
      template_code = $that.val(),
      code = '',
      new_data = '';
            
  // Extract settings from the theme and add them to #result              
  $(document).on('click', '#submit-code', function (){
      
      $('#tab-1').addClass('unactive');
      $('#tab-2').removeClass('unactive');
      
      $(template_code).find('setting').each(function (i){
          
        var $this = $(this),
            setting_std = $this.text(),
            setting_id = $this.attr('id');
          
        code += '<input id="'+setting_id+'" name="'+setting_id+'" type="text" value="'+setting_std+'"><br>';
          
      });
      
      if(code !== ''){
        $('#result').html(code);
      }
          
  });
  
  // Update old data with the new one
  $(document).on('click', '#update-code', function (){
      
    new_data = $( "#settings-form" ).serializeArray();
      
    $.each( new_data, function( i, new_field ) {   
        var xml = $($.parseXML(template_code));
        xml.find('setting#'+ new_field.name).text(new_field.value);
        template_code = (new XMLSerializer()).serializeToString(xml[0]);  
    });
      
    $('#template-code').val(template_code);
    $('#tab-1').removeClass('unactive');
      
    return false;
           
  });
    
});