JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Original table</h1>
<table id="room_type_table">
    <thead>
        <tr class="drag_room_type_header">
            <td>Change<br /> order</td>
            <td>Name</td>
            <td>Show header<br /> in calendar</td>
            <td>Rooms of this type count<br /> towards the total rooms</td>
            <td>Occupied rooms of this type<br />count towards the full rooms</td>
            <td>Number of rooms<br /> of this type</td>
            <td>Delete</td>
        </tr>
    </thead>
    <tbody id="drag_tbody">
        <tr id="room_type_tr_5" class="moveme ui-draggable">
            <td class="drag-handle">⇕</td>
            <td><input type="text" name="room_types[5][name]" value="Normal rooms" id="room_type_name_5" /></td>
            <td><input type="checkbox" name="room_types[5][show_header]" value="1"></td>
                <td><input type="checkbox" name="room_types[5][add_to_total]" value="1" checked="checked" /></td>
                <td><input type="checkbox" name="room_types[5][add_to_full]" value="1" checked="checked" /></td>
            <td>31</td>
            <td>X</td>
        </tr>
        <tr id="room_type_tr_33" class="moveme ui-draggable">
            <td class="drag-handle">⇕</td>
            <td><input type="text" name="room_types[33][name]" value="Jacuzzi rooms" id="room_type_name_33" /></td>
            <td><input type="checkbox" name="room_types[33][show_header]" value="1"></td>
                <td><input type="checkbox" name="room_types[33][add_to_total]" value="1" checked="checked" /></td>
                <td><input type="checkbox" name="room_types[33][add_to_full]" value="1" checked="checked" /></td>
            <td>3</td>
            <td>X</td>
        </tr>
        <tr id="room_type_tr_1" class="moveme ui-draggable">
            <td class="drag-handle">⇕</td>
            <td><input type="text" name="room_types[1][name]" value="Overbooked rooms" id="room_type_name_1" /></td>
            <td><input type="checkbox"...

JavaScript

$list = convert_table_to_list($("table#room_type_table"));

function convert_table_to_list($table) {
    var $list = $("<ul></ul>");
    $list.css("list-style-type", "none");
    $list.css("padding", 0);

    $table.find("tr").each(function() {
        var $li = $("<li></li>");
        if ($(this).parent().prop("tagName") == "THEAD") {
            $li.addClass("li-thead");
        }
        else if ($(this).parent().prop("tagName") == "TFOOT") {
            $li.addClass("li-tfoot");
        }
        else {
            $li.addClass("li-tbody");
        }
        $li.height($(this).height());
        $(this).find("td").each(function() {
            var $div = $("<div></div>");

            // Add inline and external styling
            var style = css($(this));
            $div.css(style);

            // Add some browser default styles
            $div.css("display", "table-cell");
            $div.html($(this).html());
            $div.width($(this).width());
            $div.height($(this).height());
            $div.css("vertical-align", $(this).css("vertical-align"));
            $div.css("padding", $(this).css("padding"));

            // Add class(es)
            $div.addClass($(this).attr("class"));

            // Append to li
            $li.append($div);
        });
        // Append li to ul
        $list.append($li);
    });

    $list.insertAfter($("#insertlist"));
    //$table.remove();

    return $list;
}

// The following are taken from http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element
function css(a) {
    var sheets = document.styleSheets, o = {};
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (a.is(rules[r].selectorText)) {
                o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
            }
        }
    }
    return o;
}
function css2json(css) {
    var s = {};
    if (!css)...