JSFiddle - React, Tailwind, and code Playground

by fruitcake20

HTML

<form>

  Name:
  <input type="text" id="inName"><br>
  Date: <input type="date"  id="inDate" style="margin-left:8px;"><br>
  
  Fast Food<br>
  <input type="radio" id="inr1" name="fchoices" > <p id="p1" style="display:inline;"></p><br>
  <input type="radio" id="inr2" name="fchoices" > <p id="p2"style="display:inline;"></p><br>
  <input type="radio" id="inr3" name="fchoices"> <p id="p3" style="display:inline;"></p><br>
  <input type="radio" id="inr4" name="fchoices"> <p id="p4" style="display:inline;"></p>
   <input type="text" id="inOther"><br>
   
 
   <input type="checkbox" id="inCheckBox" style="float:left;margin-left:270px;margin-top:-140px">
   <p style="float:left;margin-left:290px;margin-top:-143px">Take Out</p>
  
  

</form>
<div style="margin-top:-95px;margin-left:275px;" >
Order
<table id="ordTbl"style="width:20%">

	<tr>
  	<td>Qty</td>
    <td>Product</td>
    </tr>
  
  
  
</table>

</div>

CSS

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

JavaScript

var data = {
  "name": "Juan dela Cruz",
  "choices": ["Jollibee", "McDonalds", "KFC", "other"],
  "type": 1,
  "selected": "Jollibee",
  "order":{"food1":4,"food2":1,"food3":1,"food4":1},
  "date":"July 21,2016",
};


var val = data["type"];
var selected = data["selected"];

var date1 = new Date (data["date"]);


$(document).ready(Execute);

function Execute() {

//alert(data["order"][4]);

for(var key in data["order"]) 
{
    alert('key: ' + key + '\n' + 'value: ' + data["order"][key]);
    $("#ordTbl").append("<tr><td>"+data["order"][key]+"</td>Qty<td>"+[key]+"</td></tr>");
    
    }











var m =date1.getMonth()+1;


      if(m>9)
      {

      }
      else
      {
      m="0"+m;
      }


    
    var d=date1.getDate();



      if(d>9)
      {

      }
      else
      {
      d="0"+d;
      }     
      
  

          
  var y=date1.getFullYear();

  var date=y+"-"+m+"-"+d;
  




$("#inName").val(data["name"]);


  $("#inDate").val(date);
  
  
  
  $("#p1").text(data["choices"][0]);
  $("#p2").text(data["choices"][1]);
  $("#p3").text(data["choices"][2]);

  $("#inr1").attr('value', data["choices"][0]);
  $("#inr2").attr('value', data["choices"][1]);
  $("#inr3").attr('value', data["choices"][2]);
  $("#inr4").attr('value', data["choices"][3]);
  
  $("#inOther").val(data["choices"][3]);

 deOthers();

  
  $('input[type=radio][value=' + selected + ']').attr('checked', true);

		
  if($('#inr1').is(':checked') || $('#inr2').is(':checked') || $('#inr3').is(':checked')) 
  { 
  $('input[id=inOther]').attr('disabled', true);
  }
  else
  {
 
   $('input[id=inOther]').attr('disabled', false);
  }
  
  





  if (val == 0) {

    $('input:checkbox').attr('checked', false);
    $('input:checkbox').attr('checked', false);
  } else {

    $('input:checkbox').attr('checked', true);

  }

}

$('input:radio[name="fchoices"]').change(function(){

deOthers();

 });


function deOthers()
{
 if($('#inr1').is(':checked') || $('#inr2').is(':checked') ||...