JSFiddle - React, Tailwind, and code Playground

HTML

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

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

JavaScript

$(document).ready(function() {

  code = '';

  // Extract settings from the theme and add them to #result              
  $(document).on('click', '#submit-code', function() {

    template_code = $('#template-code').val();

    $('#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() {

    //template_code=$('#template-code').val();

    for (i = 0; i < $('input:text').length; i++) {

      dynamic_regex = "(<setting id='" + $('input:text').eq(i).attr('id') + "'>)(.*?)(</setting>)";

      var regex = new RegExp(dynamic_regex, 'gm');

      var subst = '$1' + $('input:text').eq(i).val() + '$3';
      $('#template-code').val($('#template-code').val().replace(regex, subst));

    }

  });

});