JSFiddle - React, Tailwind, and code Playground

HTML

<div id="#1" class="mydiv"> Div 1 </div>
    <div id="#2" class="mydiv"> Div 2 </div>
    <div id="#3" class="mydiv"> Div 3 </div>
    <div id="#4" class="mydiv"> Div 4 </div>
    <div id="#5" class="mydiv"> Div 5 </div>
    <div id="#6" class="mydiv"> Div 6 </div>

CSS

div {
          background-color: #abc;
          position: relative;
          width: 50px;
          height: 50px;
          margin: 5px;
        }

JavaScript

$(function () {
    function move50 () {
            $(this).stop().animate({left: "50px"}, 500);
        }
        function move30 () {
            $(this).stop().animate({left: "30px"}, 500);
        }

        jQuery(".mydiv").each(function (i, elem) {
            $(elem).hover(move50, move30);
        });
});