JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://classroomsalon.org/js/jsrender1.js"></script>
<script id="CdetailsTemplate" type="text/x-jsrender">
    <div>
        Document: {{>document}}<br/>Selection:{{>selection}}<br/>Comment:{{>comment}}
    </div>
</script>

<script id="CquestionTemplate" type="text/x-jsrender">
    <div>
        Document: {{>document}}<br/>Selection:{{>selection}}<br/>Question:{{>question}}
    </div>
</script>

<script id="RdetailsTemplate" type="text/x-jsrender">
    <div>
        Document: {{>document}}<br/><br/>Question:{{>question}}<br/><br/>Response:{{>response}}
    </div>
</script>
    
<!--// 
- view-source on the output frame. all you put here is the contents of <body/> 
- use the panels on the left to add CSS/JS resources and set the title, etc.
- http://borismoore.github.com/jsrender/demos/index.html
//-->

<h1>Salon Analytics</h1>
<div class="container">
    <h2>Input</h2>
    <div class="container">
        <h3>Add a Comments File:</h3>
        <input class="fileSource" type="file" id="comments" name="comments" />
        <button class="parserStarter" data-input="comments">Start Processing Comments</button>
        <p data-input="comments" class = "progress" id="comProgress"><p>
    </div>
    <div class="container">
        <h3>Add a Responses File:</h3>
        <input class="fileSource" type="file" id="responses" name="responses" />
        <button class="parserStarter" data-input="responses">Start Processing Responses</button>
        <p data-input="responses" class="progress" id="resProgress"><p>
    </div>
</div>
    

<div class="container">
    <h2>Output</h2>
    <div class="container">
        <button class="onlyOneDisabledGroup" data-show="#outputComments" id="cb">COMMENTS</button>
        <button class="onlyOneDisabledGroup" data-show="#outputResponses" id="rb">RESPONSES</button>
        Search:
        <input type="text" id="keyword" value ="">
        <button id="search">Search</button>
    </div>
    
    <div class="container...

CSS

/* you might want to use the "Normalized CSS" provided by jsFiddle */

* {
    font-family:consolas, mono, courier;   
}

html, body {
    background: #f0f0f0;   
}
.container {
    background: white;
    border:1px solid #c0c0c0;
    margin:10px;
    padding:10px;
}

div {
    background: white;
    border:1px solid #c0c0c0;
    margin:5px;
    padding:5px;
}

.search {
    background: white;
    border: none;
    margin: 0px;
    padding:0px;
    float: right;
}

JavaScript

// JavaScript source code
// use the JSLint button above to check your JS code!
//What each index in a row from comments.csv represent
var COMMENT_INDEX = {
    name: 0,
    email: 1,
    document: 2,
    annotationID: 3,
    documentID: 4,
    userID: 5,
    commentText: 6,
    commentArea: 7,
    commentPositivity: 8,
    commentTime: 9,
    replyTo: 10,
    annotationParagraphID: 11,
    annotationID1: 12,
    paragraphID: 13,
    startChar: 14,
    endChar: 15,
    annotationText: 16,
    salonID: 17
};

//What each index in a row from responses.csv represent
var RESPONSE_INDEX = {
    name: 0,
    email: 1,
    document: 2,
    question: 3,
    response: 4,
    stance: 5,
    created: 6,
    modified: 7,
    documentID: 8,
    questioID: 0,
    responseID: 10,
    userID: 11
};

var Cdata = {};
var Rdata = {};

var CsvParser = function(rowHandlers) {
    // variables used in the parser
    var isHeader;
    var header;
    var headerEndIndex;
    var quotes;
    var currentLine;
    var currentElement;
    var inElement;
    var headerSize;

    // parsedData saves all the processed data
    var parsedData;

    // accessor
    var getParsedData = function () {
        return parsedData;
    };

    // once you have a whole row, call this
    var handleRow = function(row) {
        for (var i in rowHandlers) {
            var rowHandler = rowHandlers[i];
            // copy row here if you really think it is necessary
            // you might have to use rowHandler.call(this, row); to access parsedData
            // or rowHandler.call(parsedData, row) to be more secure
            // google javascript Function.call and Function.apply
            rowHandler.call(parsedData, row);
        }
    }

    // call this for each chunk
    var parse = function(chunk) {
        //First reads the header
        if (isHeader) {
            for (var i = 0; i < chunk.length && isHeader; i++) {
                var currentChar = chunk.charAt(i);
                switch...