JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <link href="http://ivaynberg.github.com/select2/select2-3.2/select2.css" rel="stylesheet"/>
<script src="http://ivaynberg.github.com/select2/select2-3.2/select2.js"></script>
    </head>
    <body>
        <h1>Test to apply jQuery extensions to dynamically generated elements</h1>
        <div id="testInsert" class="button">Create Select Field</div>
        <div id="container"><span class="info">Dynamically generated select fields</span></div>
    </body>
</html>

CSS

body {
    padding:20px;
    font-family:Arial,sans-serif;
    text-align:center;
}

h1 {
    font-weight:bold;
    font-size:20px;
    margin-bottom:20px;
}
.delete {
    color:#fff;
    margin-left:10px;
    background: #a90329;
     padding:3px 10px;
    font-size:14px;
    border:1px solid #a90329;
    border-radius:3px;
    background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019));
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);
background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%);
}

.button {
   margin:0 auto;
   background-image: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(235,235,235,1) 50%, rgba(221,221,221,1) 50%,rgba(207,207,207,1) 100%);
   background-image:    -moz-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(235,235,235,1) 50%, rgba(221,221,221,1) 50%,rgba(207,207,207,1) 100%);
   background-image:     -ms-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(235,235,235,1) 50%, rgba(221,221,221,1) 50%,rgba(207,207,207,1) 100%);
   background-image:      -o-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(235,235,235,1) 50%, rgba(221,221,221,1) 50%,rgba(207,207,207,1) 100%);
   background-image:         linear-gradient(top, rgba(242,242,242,1) 0%,rgba(235,235,235,1) 50%, rgba(221,221,221,1) 50%,rgba(207,207,207,1) 100%);
   -webkit-box-shadow: 0px 0px 0px 1px rgba(250,250,250,1)inset;
      -moz-box-shadow: 0px 0px 0px 1px rgba(250,250,250,1)inset;
           box-shadow: 0px 0px 0px 1px rgba(250,250,250,1)inset;
   border: solid 1px rgba(112,112,112,1);
   -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
           border-radius: 3px;
   padding: 0px 24px 0px 24px;
  ...

JavaScript

$(document).ready(function() {
    $('#testInsert').click(function() {
      var $selBox = $('<div><select><option>Option A</option><option>Option B</option></select></div>').appendTo('#container');
        var $btn = $('<button class="delete">Delete</button>').appendTo($selBox);
        $btn.click(function() {
           $selBox.remove();
        });
    });
    document.addEventListener("DOMNodeInserted", function(event){
       var target = event.srcElement || event.target,
           $selection = (target && target.tagName.toLowerCase() == 'select') ? $(target) : $(target).find('select');
        if($selection) {
           $selection.select2();
       }
});});