Appending item to list makes it unselectable

Question

I'm trying to create a sort of html select dropdown using the bootstrap dropdown. In the list I'm hiding the default selected value but on change I delete the chosen option from the list and add the default value to make it selectable again etc. like this:

Selected: Cool
Option: Code
Option: Bro

When selecting Code it becomes:

Selected: Code
Option: Bro
Option: Cool

Now this works well when an option has not been selected before but when an option already has been selected you cant select it again.. Anyone who knows what I'm doing wrong here?

var from = $('#selected_from').data("curfromcoin");
var to = $('#selected_to').data("curtocoin");

$('#from_coin a').on("click", function() {
  $('#selected_from').html($(this).data('fromcoin'));
  $('#selected_from').data('curfromcoin', $(this).data('fromcoin'));
  $("#from_drop").append($("<li><a href='#' data-fromcoin='" + from + "'>" + from + "</a></li>"));
  $("#from_drop li").remove(":contains('" + $(this).data('fromcoin') + "')");
  from = $('#selected_from').data("curfromcoin");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="from_coin" class="input-group-addon">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   <span id="selected_from" data-curfromcoin="Cool">Cool</span> <span class="caret"></span>
 </button>
  <ul id="from_drop" class="dropdown-menu">
    <li><a href="#" data-fromcoin="Code">Code</a></li>
    <li><a href="#" data-fromcoin="Bro">Bro</a></li>
  </ul>
</div>