JSFiddle - React, Tailwind, and code Playground

by Fogest

HTML

<table class="table table-hover table-bordered review" title="">
        <thead>
        <tr>
            <th class="id">Name</th>
            <th class="comment">Comment</th>
            <th class="time">Time</th>
            <th class="weight">Weight</th>
            <th class="decision">Approve/Reject</th>
        </tr>
        </thead>
        <tbody title="">
                    <tr title="">
                <td class="id" title="">
                                            <img src="https://lh5.googleusercontent.com/-Mj9yrvip438/AAAAAAAAAAI/AAAAAAAAACM/tJTDxiVKLZ8/photo.jpg?sz=150" alt="Chuck Norris" title="" style="">
                                                                <a class="displayName" target="_blank" href="https://plus.google.com/105199126893492593640">Chuck Norris</a>

                                    </td>
                <td class="comment"></td>
                <td class="time">4 weeks ago</td>
                <td class="weight">1</td>
                <td class="decision">
                    <button class="btn btn-success approve" type="button" name="1">
                        Approve
                    </button>
                    <button class="btn btn-danger reject" type="button" name="1">
                        Reject
                    </button>
                </td>
            </tr>
                </tbody>
    </table>

JavaScript

$("button").click(function(){
    var row = $("table.review tr:last").clone(true);
    res = jQuery.parseJSON('[{"id":17,"profileId":"102939610133066109819","comment":null,"youtubeUrl":"http:\/\/youtube.com","displayName":"Darktoque","profilePictureUrl":"https:\/\/lh5.googleusercontent.com\/-0OaCXLFcuR8\/AAAAAAAAAAI\/AAAAAAAAACc\/4nqQs5IND8w\/photo.jpg?sz=150","approvalStatus":0,"rep":1,"created_at":"2015-03-21 14:10:30","updated_at":"2015-03-21 14:10:30","approvingUser":null,"ip":""}]');
    
    row.find('.id img').attr("src", res[0].profilePictureUrl);
    row.find('.id img').attr("alt", res[0].displayName);
    row.find('.id a.displayName').text(res[0].displayName);
    row.find('.id a.displayName').attr("href", "https://plus.google.com/" + res[0].profileId);
    row.find('.id a.youtubeUrl').attr("href", res[0].youtubeUrl);
    row.find('.comment').text(res[0].comment);
    row.find('.time').text(res[0].time);
    row.find('.weight').text(res[0].weight);
    row.find('.btn.approve').attr("name", res[0].id);
    row.find('.btn.reject').attr("name", res[0].id);
    row.insertAfter("table.review tr:last");
});