JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>My Extras</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  <style>
  h1 { padding: .2em; margin: 0; }
  #products { float:left; width: 500px; margin-right: 2em; cursor: move }
  #cart { width: 300px; float: left; margin-top: 1em; cursor: move }
  /* style the list to maximize the droppable hitarea */
  #cart ol { margin: 0; padding: 1em 0 1em 3em; }
  </style>
  <script>
      $(function () {
          $("#catalog").accordion();
          $("#catalog li").draggable({
              helper: "clone"
          });
          $("#catalog ul").droppable({
              drop: function (event, ui) {
                  $(ui.draggable).remove();
                  $("<li></li>").text(ui.draggable.text()).appendTo(this);
              }
          });

          $("#cart ol").draggable({
              appendTo: "body",
              helper: "clone"
          });
          $("#cart ol").droppable({
              drop: function (event, ui) {
                  $(ui.draggable).remove();
                  $(this).find(".placeholder").remove();
                  var el = $("<li>" + ui.draggable.text() + "</li>&nbsp;<a href='#'>[x]</a>").filter('a')
                      .click(function () {
                          el.remove();
                       }).end().appendTo(this);
              }
          });
      });
  </script>
</head>
<body>
 
<div id="products">
  <h1 class="ui-widget-header">Car Extras</h1>
  <div id="catalog">
    <h2><a href="#">Security</a></h2>
    <div>
      <ul>
        <li id="1">ABS</li>
        <li id="2">ESP</li>
        <li id="3">Airbag</li>
      </ul>
    </div>
    <h2><a href="#">Confort</a></h2>
    <div>
      <ul>
        <li>Air Conditioning</li>
        <li>Hands-free Phone</li>
       ...