JSFiddle - React, Tailwind, and code Playground

by Hifni Nazeer

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div class="row">
  <div class="col">
    <div class="container">
		<h3>
		Pick your Bank
		</h3>
      <button type="button" class="bank btn btn-light" data-url="https://mybank.nationstrust.com" data-bank="NTB">
        <span style="padding-right:3px; padding-top: 3px; display:inline-block;background-color:white;">
          <img class="manImg" src="https://www.nationstrust.com/images/ntb_logo.png" height="30" width="100" alt="NTB" />
        </span>
      </button>
      <button type="button" class="bank btn btn-light" data-url="https://online.boc.lk/T001/channel.jsp" data-bank="BOC">
        <span style="padding-right:3px; padding-top: 3px; display:inline-block;background-color:white;">
          <img class="manImg" src="https://www.boc.lk/catalog/view/theme/default/images/new/boc-logo.jpg" height="30" width="100" alt="BOC" />
        </span>
      </button>
      <button type="button" class="bank btn btn-light" data-url="https://www.combank.lk/digitalbanking/" data-bank="COMB">
        <span style="padding-right:3px; padding-top: 3px; display:inline-block;background-color:white;">
          <img class="manImg" src="https://www.combank.lk/digitalbanking/images/logo.png" height="30" width="100" alt="COMB" />
        </span>
      </button>
      <button type="button" class="bank btn btn-light" data-url="https://www.sampath.lk/en/e-banking"...

JavaScript

$(document).ready(function(){
	$('button.bank').click(function(e){
		e.preventDefault();
		var bankName = $(this).data("bank");
		var bankUrl = $(this).data("url");
		console.log(bankName + "=" + bankUrl);
		
		$('a').attr("href", bankUrl);
	
	});
	
});