JSFiddle - React, Tailwind, and code Playground

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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/js/bootstrap-select.min.js"></script>
<div class=repeat>
<div class=elem action=text1>
  <select class="selectpicker color col-xs-3" data-width="fit">
  <option data-content="<div class='colorpreview' style='background-color:red' ></div>"> 1</option>
  <option data-content="<div class='colorpreview' style='background-color:blue'></div>"> 2</option>
  </select>
 </div>
 </div>
 <button class=addText>Копировать последний select</button>

CSS

select{
  clear:both;
  display:block;
}
.colorpreview{
            background: #bbb;
          border: 1px solid #bbb;
          height: 30px;
          width: 30px;
          border-radius: 5px;
          display: block;
}

JavaScript

$('.addText').click(function() {
  var count = $('.repeat').length;
  var next = count + 1;
  $('.elem:last-child').clone(true).attr('action', 'text'+ next).appendTo('.repeat');
});

$('.color').on('changed.bs.select', function (e) {
  action = $(this).parent('.color').parent('.elem').attr('action');
  alert(action);
});