JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css">
<script src="http://code.jquery.com/qunit/git/qunit.js"></script>
<h1 id="qunit-header">Unit Tests</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture"></div>

JavaScript

$.fn.insertAt = function(index, $parent) {
    return this.each(function() {
        if (index === 0) {
            $parent.prepend(this);
        } else {
            $parent.children().eq(index - 1).after(this);
        }
    });
}

test('can insert into empty list', function() {
    var list = $('<ul></ul>');
    var newItem = $('<li></li>');

    newItem.insertAt(0, list);

    var items = list.children();
    equal(items.length, 1);
});

test('can insert at first position in non-empty list', function(){
    var oldItem = $('<li>old item</li>');
    var list = $('<ul></ul>').append(oldItem);
    var newItem = $('<li>new item</li>');
    
    newItem.insertAt(0, list);

    var items = list.children();
    equal(items.length, 2);
    equal(items.eq(0).text(), newItem.text());
    equal(items.eq(1).text(), oldItem.text());
});

test('can insert at non-first position in non-empty list', function(){
    var oldItem = $('<li>old item</li>');
    var list = $('<ul></ul>').append(oldItem);
    var newItem = $('<li>new item</li>');
    
    newItem.insertAt(1, list);

    var items = list.children();
    equal(items.length, 2);
    equal(items.eq(0).text(), oldItem.text());
    equal(items.eq(1).text(), newItem.text());
});