JSFiddle - React, Tailwind, and code Playground

by georgesarkisss

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<!DOCTYPE html>
<html>
<head>
    <style>
        
    </style>
    
    </head>
<body>
 <input id="btnAdd" value="Add" type="button" />
 
 
 <div id="Textboxcontainer">
  <!--Textbox will be added here -->
</div>
 
 <br />
<br />

<input type="hidden" id="hfSelectedValue" />
<input type="hidden" id="hfDropDownIds" value="" />

<input id="btnGet" type="button" value="Send to Arduino" />
<input type="hidden" id="hfDDLId" value="0" />
<br />
<textarea id="textareaObservation"></textarea>
    
    <script type="text/javascript">
    

$(function() {
  var $textfield = $("#text_field");
	var $Superselect = $("superSelect");
     var values = "";
  $("#btnAdd").bind("click", function() {
        AddControl();
 
  });
  
  
  $("#btnGet").bind("click", function() {

    var values = "";

    $('[id*=hfDDLId]').each(function() {
      values += "Number of Sensors = " + $(this).val() + "\n";
    });

 
    $("input[name=DynamicTextBox]").each(function() {
      values += $(this).val() + "\n";

    });
    

       var selectedOptions = [];
    $("select.superSelect").each(function(){
        var value = $(this).val();
        if($.trim(value)){
            selectedOptions.push(value);
        }
    });
       $("#textareaObservation").html(selectedOptions.join(' '));
    $textfield.html(values);


  });

  $("body").on("click", ".remove", function() {
    $(this).closest("div").remove();
    var b = 1;
		var a = 1;
    var Bds = [];
 		var Ads = [];
    $('[id*=opta]').each(function() {
      $(this).attr("id", "opta" + a);
      $(this).attr("name", "opta" + a);
      Ads.push(a);
      a++;
    });
    
   $('[id*=optb]').each(function() {
      $(this).attr("id", "optb" + b);
      $(this).attr("name", "optb" + b);
      Bds.push(b);
      b++;
    });
   
    $('[id*=hfDDLId]').val(parseInt($('[id*=hfDDLId]').val()) - 1);
    var resultIds = Ads.join(',');
   ...

CSS

.elements {
  display: flex;
  justify-content: left;
  align-items: left;
  min-height: 100%;
}

.element__item {
  padding: 1rem;
  border: 1px solid #ccc;
  margin: 0.5rem;
}