JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="form-inline">
    <div class="form-group">
        <input type="text" class="form-control js-field-entry" placeholder="Enter text here">
    </div>
    <button type="button" class="btn btn-primary js-btn-add">Add List Item</button>
</div>
<div class="well">
    <ul class="js-list">
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, quae.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, quae.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, quae.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, quae.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, quae.</li>
    </ul>
</div>

SCSS

body {
    padding: 8%;
}

.form-inline {
    margin-bottom: 15px;
    .form-group {
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 0;
    }
}

JavaScript

var $field = $('.js-field-entry'),
    $btn = $('.js-btn-add'),
    $list = $('.js-list');

$btn.on('click', function() {
    if ($.trim($field.val()) != '') {
        $list.append('<li>' + $field.val() + '</li>')
    }
});