Manipulate Fruit with jQuery

HTML

<div id="container">
  <h1>Hello, DOM!</h1>

  <button id="sorter">Sort fruit</button>

  <p>This is some old fruit:</p>

  <ul class="old">
    <li class="glyph-apple mushy" data-type="red">Apples</li>
    <li class="glyph-pear spoiled">Pears</li>
    <li class="glyph-cherry">Cherries</li>
  </ul>

  <p>This is some fresh fruit:</p>

  <ul class="new"></ul>

</div>

CSS

.spoiled {
  background-color: #ccc;
}

.fresh {
  border: 1px dotted green;
}

ul li,
.glyph {
  padding: 3px 0 3px 25px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: middle left;
}

.glyph-cherry {
  background-image: url('http://cdn.flaticon.com/png/64/2146.png');
}

.glyph-apple {
  background-image: url('http://cdn.flaticon.com/png/64/18251.png');
}

.glyph-pear {
  background-image: url('http://cdn.flaticon.com/png/64/2158.png');
}

.glyph-grapes {
  background-image: url('http://cdn.flaticon.com/png/64/18353.png');
}

JavaScript

// Content manipulation
//
// Use jQuery to complete the following
// You will be adding, moving, and manipulating content
// 
// Warnings:
// a. Be sure to write your code so it runs on document ready only
// b. Take care not to REMOVE classes or attributes unless 
// told to do so in each task below

$(function() {


  $('li').one('click', function() {
     
     console.log('hi i was clicked');
  
  });

});