Question: This code will replace what is shown inside `<button></button>` with selected icon from dropdown list. 
This works good, only problem is that after clicking on selected element, icon inside that element will for some reason disappear? Why does this happen? I want `<li>` to be unchanged
<http://codepen.io/filaret/pen/PGJEAL>

**HTML:**

```
<div class="input-group-btn">

    <button type="button" class="btn" data-toggle="dropdown">
        <i class="fa fa-book"></i>
    </button>

    <ul class="dropdown-menu">
        <li><i class="fa fa-book"></i> Something 111</li>
        <li><i class="fa fa-newspaper-o"></i> Something 2222</li>
    </ul>

</div>

```

**jQuery:**

```
var $selectWrapper = $('.input-group-btn');
$selectWrapper.find(".dropdown-menu li").click(function() {

    // Get <i class="fa"></i>
    var $selectedIcon = $(this).find('.fa');
    // Put it inside <button></button>
    $selectWrapper.find(".btn").html($selectedIcon);

});

```

Answer: 
Otherwise since you have i tag in dropdown and button tag and that only class change, why don't you just copy the class, it's more efficient, faster and easy to understand in your code.

```
jQuery(document).ready(function($) {

  "use strict";

  var $selectWrapper = $('.input-group-btn');
  var $buttonIcon = $('.btn i');

  $selectWrapper.find(".dropdown-menu li").click(function() {

    // Get <i class="fa"></i>
    var $selectedIcon = $(this).find('.fa');

    // get icon classes
    var classes = $selectedIcon.attr("class");

    // Put the class in the button i tag
    $buttonIcon.attr('class', classes);

  });

});

```

See code pen: <http://codepen.io/anon/pen/ORxQPZ>
You need to clone the icon using `clone()` like following

```
var $selectedIcon = $(this).find('.fa').clone();

```

instead of 

```
var $selectedIcon = $(this).find('.fa');

```

**[UPDATED CODEPEN](http://codepen.io/anon/pen/ALQVBq?editors=1010)**