JSFiddle - React, Tailwind, and code Playground

HTML

<button id ='start'>start</button>
<button id='stop'>stop</button>
<div id="test">

<img src="https://dl.dropbox.com/s/66ip1iz8cm3wf2l/dial.png" style="position:absolute;top:=;left:;" id="dial"></img>
    <img src="https://dl.dropbox.com/s/siqq3e8kdaefqn8/icon_0.png" style="position:absolute;top:60px;left:190px;" id="1"></img>
   
    <img src="https://dl.dropbox.com/s/zikxwpakha2ei1v/icon_1.png" style="position:absolute;top:100px;left:100px;" id="2"></img>
    <img src="https://dl.dropbox.com/s/dn5n76r6yr1tzpd/icon_2.png" style="position:absolute;top:180px;left:70px;" id="3"></img>
    <img src="https://dl.dropbox.com/s/vu9uckyoo7k8wcc/icon_3.png" style="position:absolute;top:270px;left:70px;" id="1"></img>
    <img src="https://dl.dropbox.com/s/lnb9h4hazcd619u/icon_4.png" style="position:absolute;top:370px;left:110px;" id="4"></img>
    <img src="https://dl.dropbox.com/s/pt0q3zbdxt3843d/icon_5.png" style="position:absolute;top:420px;left:230px;" id="5"></img>
	<img src="https://dl.dropbox.com/s/j9ybktafm0v08ff/icon_6.png" style="position:absolute;top:350px;left:340px;" id="6"></img>
	<img src="https://dl.dropbox.com/s/nuh0njoeczd94gm/icon_7.png" style="position:absolute;top:250px;left:390px;" id="7"></img>
    
    <div>

JavaScript

function swipeleftHandler( event ){
    alert("hi")
    $( event.target ).addClass( "swipeleft" );
  }

function swiperightHandler( event ){
    alert("hi--")
    $( event.target ).addClass( "swipeleft" );
  }

$( "#1" ).on( "swiperight", swiperightHandler );
$( "#1" ).on( "swipeleft", swipeleftHandler );