add selected li to an existing ul

add selected li to an existing ul

by lemon kazi

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol class="selectable" id="firstList">
  <li class="ui-widget-content">text 1</li>
  <li class="ui-widget-content">text 2</li>
  <li class="ui-widget-content">text 3</li>
</ol>
<ol class="selectable" id="result">
</ol>

CSS

#firstList .selected {
  color: red;
}

JavaScript

$('#firstList li').click(function() {
// click event handler for listening click event
  $(this).toggleClass('selected');
  // toggling selected class class
  $('#result').html($('#firstList .selected').clone())
  // updating result list with selected list item ( li which have selected class )
  // use `.removeClass('selected')` if you want to remove selected class from clone
})