JSFiddle - React, Tailwind, and code Playground

by Tejash Soni

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="switcher-field switcher-shoe_size" id="attribute496_switchers">
    <label class="switcher-label selected no-stock allow-select" id="attribute496_7" value="7" style="width:36px;height:36px;line-height:36px" data-id="13855">35</label>
    <label class="switcher-label" id="attribute496_6" value="6" style="width:36px;height:36px;line-height:36px">36</label>
    <label class="switcher-label" id="attribute496_5" value="5" style="width:36px;height:36px;line-height:36px">37</label>
    <label class="switcher-label" id="attribute496_4" value="4" style="width:36px;height:36px;line-height:36px">38</label>
    <label class="switcher-label" id="attribute496_3" value="3" style="width:36px;height:36px;line-height:36px">39</label>
    <label class="switcher-label no-stock allow-select" id="attribute496_57" value="57" style="width:36px;height:36px;line-height:36px" data-id="13855">40</label>
    <div style="clear:both"></div>
</div>

CSS

label{
    padding: 5px;
    border: 1px solid black;
}

JavaScript

$j = jQuery.noConflict();
$j('.switcher-field').find('label.switcher-label').each(function(e){
        $this = $j(this);
        var text = $j('#size_txt').text();
        $this.on('click', function (e) {
   	     	$j('.switcher-label').popover('hide');
    	});
        $this.popover({
        placement: 'bottom',
        trigger: 'click',
        selector: true,
        html: true,
            content: function (e) {
                var $data = $j('span', this);
                return ''
                    +'<span class="alert-icon"></span>'
                    +'<span style="font-size:13px; font-weight:bold;margin: 0 10px 20px 35px; display: flex;">'+text+'</span>'+'<div class="pull-right" id="calce-pop" style="text-decoration: underline; margin-bottom: 15px; cursor: pointer;" onclick="scroll();">Ver detalles</div>';
            }
        });
    });