JSFiddle - React, Tailwind, and code Playground

HTML

<div class="add">add</div>
<ul class="itemlist">
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
    <li>Item #4</li>
    <li>Item #5</li>
    <li>Item #6</li>
    <li>Item #7</li>
    <li>Item #8</li>
</ul>

CSS

.itemlist li{
    width:100px;
    height: 100px;
    margin: 8px;
    padding: 4px;
    float: left;
    background: #dddddd;
}

JavaScript

$('.add').on('click', function(){
  var $lis = $(".itemlist li");
  var pos = Math.floor(Math.random() * ($lis.length + 1)) - 1;
    if(pos != -1){
      $lis.eq(pos).after("<li>new</li>");
    } else{
      $lis.eq(0).before("<li>new first</li>");
    }
});