Checkbox and Radio input error in JavaScript and JQuery task list

Why does my Priority checkbox return 'on' as a result after selecting either the 'Important' or 'Unimportant' checkbox? Why does it not return either 'Important' or 'Unimportant'? Also, why does my Category radio selection only return the correct selection the first time I input and click the add button - on every subsequent attempt, the return is blank for Category. All the other input options work correctly.

var $addButton = $(".btn-primary");
var $removeButton = $(".btn-danger");
var $todoList = $(".uncomplete");
var $doneList = $(".completed");

//Take Text Input and Add <li> to To Do List
 $addButton.on("click", function(){
  
  //Creating object Variables 
  var $sort = $(".sort").val();
  var $newTask = $(".newTask").val();
  var $taskDescr = $(".taskDescr").val();
  var $taskDate = $(".taskDate").val();
 // var $category= $(".category").val();
  var $category= $("input[type='radio'][name='category']:checked").val();
  //var $importance = $("input[type='checkbox'][name='importance']:checked").val();
  var $importance = $('<input type="checkbox" name="importance"/>').val();
  var $newTaskString = $sort + ", " + $taskDescr + ", " + $newTask + ", " + $taskDate + ", " + $category + ", " + $importance + "  "; 
  var $todoList = $(".uncompleted");
  
   //call append method on $todoList
   
  $todoList.append("<li>" + $newTaskString + "<button><span> Done</span></button><button><span> Remove</span></button></li>").addClass("todo");
  
  //add styles to button added to DOM by append  
  var $span = $(".todo button span");
  var $button = $(".todo button");
  $button.addClass("btn btn-success");
  $span.addClass("glyphicon glyphicon-ok"); 
  $("input").val("");
   
 })
 
 //When Success button Clicked, remove task from to do list and append to completed tasks
 
  var $doneButton = $(".btn-success");

   $(".uncompleted").on("click", ".btn-success", function(){
   var $completedTask = $( this ).parent("li").text();
   $(this).parent("li").remove();
   $doneList.append("<li>" + $completedTask + "<button><span> Remove</span></button></li>").addClass("done");
   $(".done button").addClass("btn btn-danger");
   $(".done button span").addClass("glyphicon glyphicon-remove");
   
 })

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="list-wrap" contenteditable="false"> 
    <div class="list-inner-wrap">
      <h2 class="title">ToDo List</h2>
      <h3 class="title">Add Task</h2>
      
      <label for="sort">Sort Order:</label><input type="text" class="sort" name="sort" id="sort" value="" placeholder="A,B,C,etc.">
      <br>
      <label for="task-name">Task Name:</label><input type="text" class="newTask" name="task-name" id="task-name" value="" placeholder="My task...">
      <br>
      <label for="task-descr">Task Descr:</label><input type="text" class="taskDescr" name="task-descr" id="task-descr" value="" placeholder="Buy milk...">
      <!--<h4>Date</h4>-->
      <br>
      <label for="task-date">Start Date:</label><input type="text" class="taskDate" name="task-date" id="task-date" value="" placeholder="dd/mm/yyyy">
      <br>

      <form method="POST" action="..." name="radiodemo" id="radiodemo" onsubmit="getCategory();">
        <label for="category"> Category:</label>

        <input type="radio" id="grocery" name="category" value="Grocery" class="category" checked="checked">
        <label for="grocery">Grocery</label>
        <input type="radio" id="work" name="category" value="Work" class="category">
        <label for="work">Work</label>
        <input type="radio" id="chores" name="category" value="Chores" class="category">
        <label for="chores">Chores</label>
        <input type="radio" id="finance" name="category" value="Finance" class="category">
        <label for="finance">Finance</label>
      <br>
    </form>
    
      <label for="importance">Priority:</label>&nbsp &nbsp Important<input type="checkbox" class="importance" name="important" id="important" value="Important">
      <label for="importance"></label>Unimportant<input type="checkbox" class="importance" name="unimportant" id="unimportant" value="Unimportant">
      <br>
      
      <button class="btn btn-primary">
    <span class="glyphicon glyphicon-plus"> Add</span>
  </button>

      <br>

      <h3 class="title">To Do</h2>
        <h6><i>Click task item to edit or modify</i></h6>
        
      <ul class="uncompleted" id="id01"><!--contenteditable="true"-->
               
        <li>Need to be completed task
          <button class="btn btn-success"><span class="glyphicon glyphicon-ok"> Done</span>
          </button>

          <button class="btn btn-danger"><span class="glyphicon glyphicon-remove"> Remove</span>
          </button>

          <br>
        
        </li>
      </ul>