JSFiddle - React, Tailwind, and code Playground

by Pavlo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/0.7.2/tether.js"></script>
<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle collection-dropdown" type="button" id="collection-dropdown-40261" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Choose or Create Collection 1
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu user-collection-list" aria-labelledby="collection-dropdown-40261">
        <li>
            <a href="#">Happy collection</a>
        </li>
        <li>
            <a href="#">Sad collection</a>
        </li>
    </ul>
</div>

<br/>

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle collection-dropdown" type="button" id="collection-dropdown-39935" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Choose or Create Collection 2
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu user-collection-list" aria-labelledby="collection-dropdown-39935">
        <li>
            <a href="#">Happy collection</a>
        </li>
        <li>
            <a href="#">Sad collection</a>
        </li>
    </ul>
</div>

<br/>

<button type="button" id="button1" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title">Click to toggle popover</button>
<br/><br/><br/>
<button type="button" id="button2" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title">Click to toggle popover</button>

JavaScript

var button1 = '<div class="dropdown">'
    +'<button class="btn btn-primary dropdown-toggle collection-dropdown" type="button" id="collection-dropdown-40261" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">'
    +'Choose or Create Collection<span class="caret"></span></button>'
    +'<ul class="dropdown-menu user-collection-list" aria-labelledby="collection-dropdown-40261">'
    +'<li><a href="#">Happy collection</a></li><li><a href="#">Sad collection</a></li></ul></div>';
var button2 = '<div class="dropdown">'
    +'<button class="btn btn-primary dropdown-toggle collection-dropdown" type="button" id="collection-dropdown-40261" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">'
    +'Choose or Create Collection<span class="caret"></span></button>'
    +'<ul class="dropdown-menu user-collection-list" aria-labelledby="collection-dropdown-39935">'
    +'<li><a href="#">Happy collection</a></li><li><a href="#">Sad collection</a></li></ul></div>';

$(function () {
  //$('#button1').popover({template: $('.dropdown').first().html()});
  //$('#button2').popover({template: $('.dropdown').last().html()});
    $('#button1').popover({template: button1});
  $('#button2').popover({template: button2});
})