JSFiddle - React, Tailwind, and code Playground

by GopsAB

HTML

<table id="myTable" class= "table table-bordered">
            <tr>
                <th class="col-md-6 text-center success">
                    List 1
                </th>
                <th class="col-md-6 text-center success">
                    List 2
                </th>
            </tr>
            <tr>    
                <td class="col-md-6">
                    <ul id="firstlist">
                        <li>Apple <img src="next.jpg" id="next1"></li>
                        <li>Orange <img src="next.jpg" id="next2"></li>
                        <li>Avacado <img src="next.jpg" id="next3"></li>
                        <li>Banana <img src="next.jpg" id="next4"></li>
                        <li>Mango <img src="next.jpg" id="next5"></li>
                    <ul>    
                </td>
                <td class="col-md-6">
                    <ul class = "seclist" id = "seclist"> </ul>
                </td>
            </tr>
        </table>

JavaScript

$(function(){
                $( "#firstlist" ).selectable();
            });

            $(function() {
                $( "#seclist" ).selectable();
            });

            $("img").click(function(event) {
                var text = $(this).closest("li").text();
                $('<li />', {html: text}).appendTo('ul.seclist');
                $('ul.seclist').append($(this));
              
            });