JSFiddle - React, Tailwind, and code Playground

by levan gongadze

HTML

<div class="formGenerator">
      <ul class="formList">
        <li class="question">Question</li>
        <li class="heading">Heading</li>
        <li class="heading">Video</li>
        <li class="heading">Image</li>
      </ul>
      <div class="generated"></div>
    </div>

CSS

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font: 14px 'arial';
}

body {
  background: #f3f3f3;
}

.formList {
  position: fixed;
  background: #fff;
  width: 200px;
  height: 100%;
}

.formList li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.generated {
  margin-left: 220px;
}

.generatedList li {
  float: left;
  padding: 10px;
}

.generateQuestion {
  background: #fff;
  overflow: hidden;
  padding: 20px;
  width: 100%;
}

.headingInput {
  background: none;
  font-size: 20px;
  border: none;
}

JavaScript

num = 0;
      $('.question').click(function() {
        id = num++;
        $('.generated').append(
          '<ul class="generatedList">' +
          '<li data-id="'+id+'" class="value">Standart Value</li>' +
          '<li data-id="'+id+'" class="checkbox">Checkbox</li>' +
          '<li data-id="'+id+'" class="radio">Radio Buttons</li>' +
          '<li data-id="'+id+'" class="select">Select</li>' +
          '<li data-id="'+id+'" class="link">Links</li>' +
          '</ul>' +
          '<div class="generateQuestion"><input class="headingInput" type="text" name="" placeholder="Question"><div class="genapp" data-id="'+id+'"></div></div>');
      });

      // $('.heading').click(function() {
      //   $('.generated').append('<div class="generateQuestion"><input class="headingInput" type="text" name="" placeholder="Question"></div>');
      // });

      $('.generated').on('click', '.generatedList .value', function(){
        id = $(this).data('id');
        $('.genapp[data-id='+id+']').html('<input type="text" name="" placeholder="Standart Value">');
      });

      $('.generated').on('click', '.generatedList .checkbox', function(){
        id = $(this).data('id');
        $('.genapp[data-id='+id+']').html('<label><input type="checkbox" name="">Checkbox</label>');
      });

      $('.generated').on('click', '.generatedList .radio', function(){
        id = $(this).data('id');
        $('.genapp[data-id='+id+']').html('<label><input type="radio" name="">Radio Buttons</label>');
      });

      $('.generated').on('click', '.generatedList .select', function(){
        id = $(this).data('id');
        $('.genapp[data-id='+id+']').html('<select name=""><option>Select</option></select>');
      });

      $('.generated').on('click', '.generatedList .link', function(){
        id = $(this).data('id');
        $('.genapp[data-id='+id+']').html('<input type="text" name="" placeholder="http://">');
      });