JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
    <a class="coin" href="#" data-id="BTC" data-toggle="modal" data-target="#alertmodal"><i class="fa fa-bell fa-lg" title="Set Alert for BTC" style="color:orangered"></i></a>
        <a class="coin" href="#" data-id="HPC" data-toggle="modal" data-target="#alertmodal"><i class="fa fa-bell fa-lg" title="Set Alert for HPC" style="color:steelblue"></i></a>
            <a class="coin" href="#" data-id="ABC" data-toggle="modal" data-target="#alertmodal"><i class="fa fa-bell fa-lg" title="Set Alert for ABC" style="color:green"></i></a>


<!-- Modal -->
<div id="test-modal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
        <p class="alert-notification"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

CSS

a.coin {
  display: block;
  margin: 20px;
}

JavaScript

$(document).on('click', 'a.coin', function(){
    // get month
    	var val = $(this).attr('data-id'), modal = $('div#test-modal');
      console.log(val);
      modal.find('.modal-title').html('Get alerts for ' + val);
      
      modal.find('.modal-body .alert-notification').html('Get alert notifications when ' + val + ' breaks strong support / resistance lines');
      
      modal.modal('show');
   })