Can't get tab name on the web-page

Question

I'm learning a to-do list project on youtube. According to the tutorial, after pressing 'Add new project' button, there shall be a tab named as projectName, appended to element . But I get an 'undefined' tab. What's wrong here?
Here is the code (as original):

$(document).ready(function(){
            $("#projects").tabs();
            $("ul").sortable({axis:"x", containment:"#projects"});
            $("ol").sortable({axis:"y", containment:"#projects"});
            $("#btnAddProject").button()
            .click(function(){
              $('#project-dialog').dialog({width:400, resizable:false, modal:true,
              buttons:{
                "Add new project": function(){
                  var projectName = $("new-project").val();
                  $("<li><a href='#" + projectName + "'>" + projectName + "</a></li>")
                  .appendTo("#main");
                  $("#projects").tabs("refresh");
                  $("new-project").val("");
                  $(this).dialog("close");
                },
                "Cancel":function(){
                  $("new-project").val("");
                  $(this).dialog("close");
                }
              }});
            });
    
          });

 /*.ui-tabs-nav{
            background: #6eb7d6;
          }*/
    
          /*.ui-tabs-anchor{
            background: rgb(125, 181, 66)
          }*/
.container{
            width:700px;
            height:450px;
            margin:70px auto;
            border:2px solid rgb(125, 181, 66);
          }
          h2{
            color:rgb(125, 181, 66);
            text-align: center;
          }
    
          #projects{
            width: 550px;
            height: 250px;
            margin:0px auto;
          }
    
          ol li{
            border: 1px dotted black;
            cursor: pointer;
            padding: 5px;
            margin-bottom: 5px;
          }
    
          ol li:hover{
            background: #6eb7d6;
          }
          #btnAddProject{
            margin-left: 540px;
            margin-bottom: 20px;
          }

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 <div class="container">
          <h2>To Do List</h2>
          <button id="btnAddProject">Add Project</button>
          <div id="projects">
            <ul id="main">
              <li><a href="#personal">Personal</a></li>
              <li><a href="#work">Work</a></li>
            </ul>
    
            <ol id="personal">
              <li><input type="checkbox">Doctor appointment</li>
              <li><input type="checkbox">Call the plumber</li>
            </ol>
    
            <ol id="work">
              <li><input type="checkbox">Complete test case document</li>
              <li><input type="checkbox">Meet project manager</li>
              <li><input type="checkbox">Record jQuery video</li>
            </ol>
    
          </div>
        </div>
        <div id="project-dialog" title="Add a project" style="display: none;">
          <label for="new-project">Project name:</label><input id="new-project" type="text">
    
        </div>

jquery is 3.2.1, jquery-ui is 1.12.1 When I check it in console, i get "[Exception: TypeError: Illegal invocation at HTMLElement.remoteFunction (:2:14)]" error message.

Answer 1

$(document).ready(function(){
            $("#projects").tabs();
            $("ul").sortable({axis:"x", containment:"#projects"});
            $("ol").sortable({axis:"y", containment:"#projects"});
            $("#btnAddProject").button()
            .click(function(){
              $('#project-dialog').dialog({width:400, resizable:false, modal:true,
              buttons:{
                "Add new project": function(){
                  var projectName = $("#new-project").val();
                  $("<li><a href='#" + projectName + "'>" + projectName + "</a></li>")
                  .appendTo("#main");
                  $("#projects").tabs("refresh");
                  $("#new-project").val("");
                  $(this).dialog("close");
                },
                "Cancel":function(){
                  $("#new-project").val("");
                  $(this).dialog("close");
                }
              }});
            });
    
          });

 /*.ui-tabs-nav{
            background: #6eb7d6;
          }*/
    
          /*.ui-tabs-anchor{
            background: rgb(125, 181, 66)
          }*/
.container{
            width:700px;
            height:450px;
            margin:70px auto;
            border:2px solid rgb(125, 181, 66);
          }
          h2{
            color:rgb(125, 181, 66);
            text-align: center;
          }
    
          #projects{
            width: 550px;
            height: 250px;
            margin:0px auto;
          }
    
          ol li{
            border: 1px dotted black;
            cursor: pointer;
            padding: 5px;
            margin-bottom: 5px;
          }
    
          ol li:hover{
            background: #6eb7d6;
          }
          #btnAddProject{
            margin-left: 540px;
            margin-bottom: 20px;
          }

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 <div class="container">
          <h2>To Do List</h2>
          <button id="btnAddProject">Add Project</button>
          <div id="projects">
            <ul id="main">
              <li><a href="#personal">Personal</a></li>
              <li><a href="#work">Work</a></li>
            </ul>
    
            <ol id="personal">
              <li><input type="checkbox">Doctor appointment</li>
              <li><input type="checkbox">Call the plumber</li>
            </ol>
    
            <ol id="work">
              <li><input type="checkbox">Complete test case document</li>
              <li><input type="checkbox">Meet project manager</li>
              <li><input type="checkbox">Record jQuery video</li>
            </ol>
    
          </div>
        </div>
        <div id="project-dialog" title="Add a project" style="display: none;">
          <label for="new-project">Project name:</label><input id="new-project" type="text">
    
        </div>

Answer 2

Think the problem is you're referencing new_project as a tag rather than as an ID.

$("new-project").val();

Should be:

$("#new-project").val();

Keep in mind this goes both for the new project and the cancel functions.