New color not being appended to ul (checked $newColor in JS console and it says $newColor is not defiend)

//Problem:No user interation casues no change to application
//Solution:When user interacts cause changes
var color = $(".selected").css("background-color");


//When clicking on control list items
$(".controls li").click(function() {
  //deselect sibling elements
  $(this).siblings().removeClass("selected");
  //Select clicked element
  $(this).addClass("selected");
  //cache current color
  color = $(this).css("background-color");

});
//When new add color is pressed
$("#revealColorSelect").click(function() {
  //Show color select or hide the color select

  $("#colorSelect").toggle();
});

//update the new color span
function changeColor() {
  var r = $("#red").val();
  var g = $("#green").val();
  var b = $("#blue").val();

  $("#newColor").css("background-color", "rgb("+r+","+g+","+b+")");
}

//When color sliders change
$("input[type=range]").on("input", changeColor);


//When add color is pressed
$("addNewColor").click(function() {
  //Append the color to the controls ul

  var $newColor = $("<li></li>");
  $newColor.css("background-color", $("#newColor").css("background-color"));
  $(".controls ul").append($newColor);
  //Select the new color
  $newColor.click();

});

//on mouse events on the canvas
  //Draw lines