JSFiddle - React, Tailwind, and code Playground

by whicks1

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<p>
<input id="place-here" value="" type="text" />
</p>

<ul id="gram">
  <li><img class="random-img" alt="" title="choice 1" src="http://dummyimage.com/64x64/000/fff&text=1" /></li>
  <li><img class="random-img" alt="" title="choice 2" src="http://dummyimage.com/64x64/000/fff&text=2" /></li>
  <li><img class="random-img" alt="" title="choice 3" src="http://dummyimage.com/64x64/000/fff&text=3" /></li>
  <li><img class="random-img" alt="" title="choice 4" src="http://dummyimage.com/64x64/000/fff&text=4" /></li>
  <li><img class="random-img" alt="" title="choice 5" src="http://dummyimage.com/64x64/000/fff&text=5" /></li>
  <li><img class="random-img" alt="" title="choice 6" src="http://dummyimage.com/64x64/000/fff&text=6" /></li>
  <li><img class="random-img" alt="" title="choice 7" src="http://dummyimage.com/64x64/000/fff&text=7" /></li>
  <li><img class="random-img" alt="" title="choice 8" src="http://dummyimage.com/64x64/000/fff&text=8" /></li>
  <li><img class="random-img" alt="" title="choice 9" src="http://dummyimage.com/64x64/000/fff&text=9" /></li>
</ul>

CSS

#gram {
  list-style-type: none;
  margin: 0-;
  padding: 0;
  columns: 3;
  -webkit-columns: 3;
  -moz-columns: 3;
}

#gram li {
  margin:0;
  padding: 0;
}

JavaScript

$(document).ready(function() {
    var a = $("#gram > div").remove().toArray();
    for (var i = a.length - 1; i >= 1; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var bi = a[i];
        var bj = a[j];
        a[i] = bj;
        a[j] = bi;
    }
    $("#gram").append(a);
    
    $("img.random-img").on('click', function(){
    	$("#place-here").val( $(this).attr("title") );
    });
});