JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="poll-create-container">
    <ul>
        <li>
            <input type="text" value="Option 1" />
        </li>
        <li>
            <input class="ghost-input" placeholder="Click to add option" />
        </li>
    </ul>
</div>
<div id="poll-container">
    <ul>
        <li data-choice-id="choice-1">
            <label for="1">
                <input id="1" type="radio" name="option" data-current-val="20%" />Cafe 1</label> <span class="histogram"><span style="width: 35%"></span>35%</span>
        </li>
        <li data-choice-id="choice-2">
            <label for="2">
                <input id="2" type="radio" name="option" data-current-val="20%" />Cafe 2</label> <span class="histogram"><span style="width: 15%"></span>15%</span>
        </li>
        </li>
        <li data-choice-id="choice-3">
            <label for="3">
                <input id="3" type="radio" name="option" data-current-val="20%" />Cafe 3</label> <span class="histogram"><span style="width: 10%"></span>10%</span>
        </li>
        </li>
        <li data-choice-id="choice-4">
            <label for="4">
                <input id="4" type="radio" name="option" data-current-val="25%" />Cafe 4</label> <span class="histogram"><span style="width: 5%"></span>5%</span>
        </li>
        </li>
    </ul>
</div>

SCSS

#poll-container {
    ul {
        li {
            list-style: none;
            margin-top: 5px;
            
            &:first-child {
                margin-top: 0;
                }
        }
        label { 
            display: inline-block;
            cursor: pointer;
            width: 200px;
        }
        [type="radio"] {
            margin-right: 10px;
        }
        .submit-btn {
            background: green;
            color: #fff;
        }
    }
    
    .histogram {
        width: 200px;
        display: inline-block;
        
        span {
            display: inline-block;
            margin-right: 10px;
        height: 20px;
        vertical-align: middle;
        background-color: #ddd;
        }
    }
}

#poll-create-container {
    .ghost-input {
       opacity: 0.8;
        cursor: pointer;
    }
    
    ul {
        li{
            display: block;
        }
    }
}

JavaScript

var Poll = (function () {
    return function (obj) {
        // Handles all methods for the creation of the polls.
        var PollCreate = {
            init: function () {
                this.bindEvents();
                this.initializeDragConstraints();
            },

            bindEvents: function () {
                $('input').on('click keydown', _.bind(this.handleAddInput, this));
            },

            /* This function adds an extra question to the poll object. It keeps adding
             * questions until MAX_QUESTIONS has been reached. It also adds all
             * of the drag and drop handlers by calling initializeDragConstraints.
             * finally, event handlers for tab and return keystrokes are added to each
             * newly created text input box
             */
            handleAddInput: function (evt) {
                var $input = $(evt.currentTarget);
                var MAX_QUESTIONS = 8;
                var eType = evt.type; //event type

                console.log("event type=" + eType);
                switch (eType) {
                    case 'click':
                        if ($input.is('.ghost-input')) {
                            var num = $input.parent().index();
                            console.log(num);
                            if (num < MAX_QUESTIONS - 1) { //need to subtract 1 b/c we're at 2nd to last element
                                $newInput = $('<input />', {
                                    value: 'Option ' + (num + 1)
                                });
                                $newInput.on('click keydown', _.bind(this.handleAddInput, this)); //add this method to newly created box
                                $newInput.insertBefore($input.parent());
                                $newInput.wrap('<li></li>'); //wraps an existing DOM element. can't perform this action until element has been added to DOM
                                PollCreate.initializeDragConstraints();
 ...