Why do the important and unimportant buttons in this code result in an undefined value in Javascript/JQuery?

Question

Not sure why these particular buttons are producing an undefined value. Any advice would be appreciated.

https://codepen.io/JEverhart383/pen/

<div class="btn-group-lg" role="group" aria-label="...">
  <button type="button" class="btn btn-primary importance"><span class="glyphicon glyphicon-exclamation-sign" value="important"></span> Important</button>
  <button type="button" class="btn btn-primary importance" value="unimportant"> <span class="glyphicon glyphicon-minus-sign"></span> Unimportant</button>
</div>
    <br>

//Take Text Input and Add <li> to To Do List
 $addButton.on("click", function(){
  
  //Creating object Variables 
  var $newTask = $(".newTask").val();
  var $taskDate = $(".task-date").val();
  var $importance = $("btn.importance").val();
  var $newTaskString = $newTask + "  " + $taskDate + "  " + $importance; 
  var $todoList = $(".uncompleted");
  
   //call append method on $todoList
   
  $todoList.append("<li>" + $newTaskString + "<button><span> Done</span></button></li>").addClass("todo");