<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <button class="clickMe">Click Me Multiple Times !!</button> <br /> <br /> <div id="coloredDiv1" data-index="-1"></div> </div> </div>

#coloredDiv1{ width:200px; height:200px; border:1px solid #888444; }

var colors = ['#093fhhh', "#00ff00", "#ff0000", "#000000"]; $(document).ready(function () { $colorDiv1 = $('#coloredDiv1'); ln = colors.length; $('.clickMe').on("click", function () { var i = $colorDiv1.data("index"); ++i; if (i >= ln) i = 0; $colorDiv1.css({ 'background-color': colors[i] }); $colorDiv1.data("index", i); }); });