JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

HTML

<div style="float:left;">
    <ul id="list">
        <li id="Test1">Item 1</li>
        <li id="Test2">Item 2</li>
        <li id="Test3">Item 3</li>
        <li id="Test4">Item 4</li>
        <li id="Test5">Item 5</li>
    </ul>
</div>
<div style="float:left;margin-left:20px;">
    <p id="feedback">
    <span>You've selected items:</span> 
   
        <ul id="select-result">
         <span id="select-resultSpan">
            <li>No Items Selected</li>
         </span>
        </ul>
    
    </p>

</div>

CSS

ul { width: 300px; list-style: none; margin: 0; padding: 0; }
  li { background: white; position:relative;margin: 1em 0; padding: 1em; border: 2px solid gray; list-style: none; padding-left: 42px; }
  li .handle { background: #f8f8f8; position: absolute; left: 0; top: 0; bottom: 0; padding:8px; }
  .ui-selecting { background: #eee; }
  .ui-selecting .handle { background: #ddd; }
  .ui-selected { background: #def; }
  .ui-selected .handle { background: #cde; }

JavaScript

$(function () {
console.log("what"); alert("what")
    $("#list li").on("click",function() {
        $("#select-resultSpan").empty()
console.log($(this).text());alert($(this).text())
      $("#select-resultSpan").append($(this).text());

  })
 });