JSFiddle - React, Tailwind, and code Playground

by someprimetime

HTML

<div class="questions-panel">
    
<h1>First Panel</h1>

    <label>Choose a question</label>
    <ul>
        <li><a href="#">What are your areas of interest? <span>+</span></a>

        </li>
        <li><a href="#">Which office locations are you interested<span>+</span></a>

        </li>
        <li><a href="#">What employment type are you interested<span>+</span></a>

        </li>
        <li><a href="#">What is your field of study<span>+</span></a>

        </li>
        <li><a href="#">What is your GPA?<span>+</span></a>

        </li>
        <li><a href="#">What is  your work status?<span>+</span></a>

        </li>
        <li><a href="#">What is  your anticipated graduation date?<span>+</span></a>

        </li>
    </ul>
</div>
<div class="edit-question">
     <h2>Second Panel</h2>

    <label>What is your GPA?</label>
    <div>Answers</div>
    <div class="answer-inputs">
        <div>
            <input type="text" name="ans1" value="4.0" />
        </div>
        <div>
            <input type="text" name="ans1" value="4.0" />
        </div>
        <div>
            <input type="text" name="ans1" value="4.0" />
        </div>
        <div>
            <input type="text" name="ans1" value="4.0" />
        </div>
    </div>
    <div class="add-input"> <a href="#" id="add-more-questions">Add additional</a>

    </div>
    <div class="controls">
        <div class="radio">
            <label>
                <input type="radio" name="isRequired" value="optional" checked/>Optional</label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="isRequired" value="required" />Required</label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="selectionType" value="single" />Single selection</label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="selectionType" value="multi" />Multi...

SCSS

label {
    border-bottom: 1px solid #ddd;
}

ul {
    list-style-type: none;
    margin: 0;
    padding:0;

    li {
        border-bottom: 1px solid #ddd;
        width: 100%;
        a {
            display: block;
            padding: 10px 0;
        }
        
        span {
            float: right;
        }
    }    
}

.add-input a {
    float: right;
}

.edit-question {
    display: none;
}

JavaScript

$(function () {
    function CheckInQuestions(arg1) {
        if (!(this instanceof CheckInQuestions)) {
            return new CheckInQuestions();
        }
        
        this.bindAddQuestions = function () {
            var $li = $('li a');
            var $questionsPanel = $('.questions-panel');
            var $editQuestionPanel = $('.edit-question');

            $li.on('click', function () {
                $questionsPanel.hide();
                $editQuestionPanel.show();
                return false;
            });
        };

        this.addAdditionalQuestions = function (evt) {
            var $target = $(evt.target);

            var $input = $('<div><input/><div>');
            var $answerInputs = $('.answer-inputs');
            var numCurrentInputs = $answerInputs.find('input').length;
            if (numCurrentInputs <= 9) {
                $answerInputs.append($input);
            }
            
            $answerInputs.find('input').last().focus();
        };

        this.bindAddMoreQuestions = function () {
            var $addMoreLink = $('#add-more-questions');
            var self = this;

            $addMoreLink.on('click', function (evt) {
                // self.addAdditionalQuestions.call(this, self);
                self.addAdditionalQuestions(evt);
            });
        };
        this.bindAddQuestions();
        this.bindAddMoreQuestions();
    }

    CheckInQuestions.prototype = {
        init: function () {}
    };

    var checkinQ = CheckInQuestions();
});