JSFiddle - React, Tailwind, and code Playground

by someprimetime

HTML

<input name="title" value="" type="text" />
<textarea name="description"></textarea>
<ul>
    <li>
        <input name="whatever" value="a" type="radio" />
    </li>
    <li>
        <input name="whatever" value="b" type="radio" />
    </li>
    <li>
        <input name="whatever" value="c" type="radio" checked />
    </li>
    <li>
        <input name="whatever" value="d" type="radio" />
    </li>
</ul>

JavaScript

$(function () {
    /* @method
     * saveInitialInputStates
     * This method checks to see what inputs don't have a value
     * and then adds a hopscotch step to them.
     */
    var saveInitialInputStates = (function () {
        var $inputs = [];
        var $title = $('input[name="title"]');
        var $description = $('textarea[name="description"]');
        var $categoryRadios;
        var $hopscotchTourElements = [];

        if (!$title.val()) {
            $hopscotchTourElements.push($title);
        }

        if (!$description.val()) {
            $hopscotchTourElements.push($description);
        }

        if ($('input[name="whatever"]:checked').length) {
            $categoryRadios = $('input[name="whatever"]:checked');
        } else {
            $categoryRadios = $('input[name="whatever"]').first();
            $hopscotchTourElements.push($categoryRadios);
        }

        if ($hopscotchTourElements.length) {
            $hopscotchTourElements[0].before('Tour');
        }
    })();
});