Demo of different Bootstrap 4 alert classes on single alert

HTML

<div class='alert alert-success'id=d1> 
  <strong>Success!</strong> Transaction completed.
</div>

<button type='button' class='btn btn-success' id='b_success'>success</button>
<button type='button' class='btn btn-info' id='b_info'>Info</button>
<button type='button' class='btn btn-warning' id='b_warning'>warning</button>
<button type='button' class='btn btn-danger' id='b_danger'>Danger</button>
<button type='button' class='btn btn-primary' id='b_primary'>Primary</button>
<button type='button' class='btn btn-secondary' id='b_secondary'>Secondary</button>
<button type='button' class='btn btn-light' id='b_light'>Light</button>
<button type='button' class='btn btn-dark' id='b_dark'>dark</button> 

JQUERY

<script>
$(document).ready(function() {
//////////////////////////
$('#b_warning').click(function(){
var presentClassName = $('#d1').attr('class');
$('#d1').removeClass(presentClassName).addClass( "alert alert-warning" );
$('#d1').html('<strong>Warning!</strong> This is Warning class alert');
})
///////////////////
$('#b_info').click(function(){
var presentClassName = $('#d1').attr('class');
$('#d1').removeClass( presentClassName).addClass( "alert alert-info" );
$('#d1').html('<strong>Info!</strong> This is Info class alert');
})
///////////////////
$('#b_success').click(function(){
var presentClassName = $('#d1').attr('class');
$('#d1').removeClass( presentClassName).addClass( "alert alert-success" );
$('#d1').html('<strong>Success!</strong> Transaction completed.');
})
///////////////////
$('#b_danger').click(function(){
var presentClassName = $('#d1').attr('class');
$('#d1').removeClass( presentClassName).addClass( "alert alert-danger" );
$('#d1').html('<strong>Danger!</strong> This is Danger class alert');
})
///////////////////
$('#b_primary').click(function(){
var presentClassName = $('#d1').attr('class');
$('#d1').removeClass( presentClassName).addClass( "alert alert-primary" );
$('#d1').html('<strong>Primary!</strong> This is Primary  class alert');
})
///////////////////
$('#b_secondary').click(function(){
var presentClassName = $('#d1').attr('class');
$('#d1').removeClass( presentClassName).addClass( "alert alert-secondary" );
$('#d1').html('<strong>Secondary!</strong> This is Secondary class alert');
})
///////////////////
$('#b_light').click(function(){
var presentClassName = $('#d1').attr('class');
$('#d1').removeClass( presentClassName).addClass( "alert alert-light" );
$('#d1').html('<strong>Light!</strong> This is light class alert');
})
///////////////////
$('#b_dark').click(function(){
var presentClassName = $('#d1').attr('class');
$('#d1').removeClass( presentClassName).addClass( "alert alert-dark" );
$('#d1').html('<strong>Dark!</strong> This is Dark class alert');
})
///////////////////
})
</script>