JSFiddle - React, Tailwind, and code Playground

by cory a

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<table id="one" border="1">
    <tbody>
        <tr>
            <th>Select</th>
            <th>ID</th>
            <th>Outcome</th>
        </tr>
        <tr>
            <td align="center">
                <input type="checkbox"  />
            </td>
            <td>CC1.1</td>
            <td>Demonstrate understanding</td>
        </tr>
        <tr>
            <td align="center">
                <input type="checkbox" class="case" name="case[]" value="2" />
            </td>
            <td>CR1.2</td>
            <td>write various</td>
        </tr>
        <tr>
            <td align="center">
                <input type="checkbox" class="case" name="case[]" value="3" />
            </td>
            <td>Droid X</td>
            <td>4.5/5</td>
        </tr>
    </tbody>
</table>
<button id="add" onclick="myfunc">make rubric</button>
<div id="rubric"></div>

JavaScript

function myfunc() {
alert("fire")
       $('input:checked').each(function () {
        $this = $(this);
        var out = $this.parent('tr').children('td').text();
        var id = $this.parent('tr').siblings('td').eq(1).text();
    //$.each($("input:checked").closest("td").siblings("td"),

    //function () {
        //$this = $(this);
        //var out = $this.parent().siblings("td").text();
        //values.push($(this).text());
        //out = ($(this).parent("td").text());

        alert(out + id )
    $("#rubric").append("<table border='1' style='width:100%'><tr><th style='width:5%'>ID</th><th style='width:40%'>Outcome</th><th style='width:5%'>R</th><th style='width:10%'>Level 1</th><th style='width:10%'>Level 2</th><th style='width:20%'>Level 3</th><th style='width:10%'>Level 4</th></tr><tr><td>CC1.2</td><td>Demo</td><td></td><td></td><td></td><td>I can</td><td></td></tr><tr><td colspan='7'><form><input type='range' name='slider-2' id='slider-2' data-highlight='true' min='0' max='100' value='50'></form></td></tr></table>");
    });

    
    
}


$(document).ready(function () {
    $("input.case").click(myfunc);
});