JSFiddle - React, Tailwind, and code Playground

by Andrew Lyndem

HTML

<button id="btn">
Click Me
</button>
<div id="abc"></div>

JavaScript

var x = document.getElementById('abc');
var btn = document.getElementById('btn');

function generateLabel() {
  const data = TabFormData.EN;
  const keys = Object.keys(data);
  
  for (let i = 0; i < keys.length; i += 1) {
    x.innerHTML += `
    	<hr>
      	<div class="${keys[i]}_tab-form__headerItemWrap">
        	<label for="${data[keys[i]][0].tabLabel}">
          	<i class="${data[keys[i]][0].tabIcon}-here">
            	class of this div is ${keys[i]}_tab-form__headerItemWrap and label for this is ${data[keys[i]][0].tabLabel} and icon is ${data[keys[i]][0].tabIcon}
            </i>
          </label>
      	</div>
      <hr>`
  }
}

btn.addEventListener('click', generateLabel);

const TabFormData = {
  EN: {
    mail: [
      {
        tabLabel: 'Email Our Team',
        tabIcon: 'fa fa-envelope',
      },
      {
        label: 'First Name',
        type: 'text',
        name: 'name',
        required: true,
        hint: 'Please, provide your Name.',
      },
      {
        label: 'Last Name',
        type: 'text',
        name: 'surname',
        required: true,
        hint: 'Please, provide your Last Name.',
      },
      {
        label: 'Email Address',
        type: 'email',
        name: 'email',
        required: true,
        hint: 'Please, provide a valid email.',
      },
      {
        label: 'Your Message',
        type: 'textarea',
        required: true,
        name: 'message',
        hint: 'Write us a message.',
        rows: 20,
        cols: 50,
      },
      {
        label: 'About You',
        required: true,
        select: [
          'Home use',
          'Business use',
          'Freelance, professional',
        ],
      },
    ],
    quote: [
      {
        tabLabel: 'Request a Quote',
        tabIcon: 'fa fa-file-invoice-dollar',
      },
      {
        label: 'First Name',
        type: 'text',
        name: 'name',
        required: true,
        hint: 'Please, provide your Name.',
      },
      {
        label:...