<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="tag_list_wrapper"> <div class="tag_list" id="job_details_more_1" data-id='1'>themefores.com<span>X</span></div> <div class="tag_list" id="job_details_more_2" data-id='2'>themefores.me<span>X</span></div> <div class="tag_list" id="job_details_more_3" data-id='3'>themefores.info<span>X</span></div> <div class="tag_list" id="job_details_more_4" data-id='4'>themefores.org<span>X</span></div> <div class="tag_list" id="job_details_more_5" data-id='5'>themefores.bd<span>X</span></div> </div>

.tag_list_wrapper{ border: 1px solid red; } .tag_list { display: inline-block; vertical-align: top; background: #f7f7f7; border-radius: 30px; margin: 5px; padding: 10px 25px 10px 10px; border: 1px solid #d6d6d6; position: relative; } .tag_list.tag_list_hide{ display: none; } .tag_list span { position: absolute; right: 8px; top: 10px; cursor: pointer; }

$( document ).ready(function() { $('.tag_list').click(function () { var id = $(this).data('id'); $(this).addClass('tag_list_hide'); }); });