JSFiddle - React, Tailwind, and code Playground

HTML

<div class ="col-md-12">
  <div class="col-md-3">
    <img src="images/gun.jpg" onclick="myMove()">
  </div>
  <div id="myAnimation" class="col-md-7">
    <img  src="http://www.freeiconspng.com/uploads/bullet-png-pictures-1.png"><br>
    <img  src="http://www.freeiconspng.com/uploads/bullet-png-pictures-1.png"><br>
    <img  src="http://www.freeiconspng.com/uploads/bullet-png-pictures-1.png"><br>
    <img  src="http://www.freeiconspng.com/uploads/bullet-png-pictures-1.png"><br>
    <img  src="http://www.freeiconspng.com/uploads/bullet-png-pictures-1.png"><br>
  </div>
</div>

CSS

img{
  width:50px;
  position: absolute;
}

JavaScript

var width = $('body').width();
var bullets = $('#myAnimation').children();
var cnt = 1;

var interval = setInterval(function(){
	var calWidth = width - $('img:nth-child(' + cnt + ')').width();
	$("#myAnimation img:nth-child(" + cnt + ")").animate({left: calWidth });
  cnt++;
  if(cnt === bullets.length)
  	clearInterval(interval);
}, 50);