I am currently trying to get an add/remove button to move one item from a table to another table. Once something is checked and the corresponding button is clicked, it should move the checked item from that table to the opposite while removing it from the current table. With the code I currently have the buttons do nothing at all. I added both my html and js code. I am new to stack so hopefully this is formatted correctly.
----Javascript File----
//Gives table striped look
function stripeTable() {
var rows = $('tr');
for (var i = 0; i < rows.length; i++) {
var jqRow = $(rows[i]);
if (i % 2 == 0) {
jqRow.addClass('row1');
} else {
jqRow.addClass('row2');
}
}
};
$(document).ready(function() {
//List of dictionaries of offered courses
var courses = [
{"class":"CMSC 321","time": "10:30AM-11:20AM ", "days":"MWF"},
{"class":"CMSC 181","time": "10:50AM-11:40AM ", "days":"TTR"},
{"class":"CMSC 284","time": "2:00PM-3:15PM ", "days":"T"},
{"class":"BUSN 100","time": "11:30AM-12:45PM ", "days":"TTR"},
{"class":"CRIM 295","time": "11:30AM-12:45PM ", "days":"MWF"},
{"class":"ENGL 100","time": "8:30AM-9:20AM ", "days":"MWF"},
{"class":"MATH 190","time": "10:30AM-11:45AM ", "days":"TR"},
{"class":"MUSC 115","time": "1:30PM-2:45PM ", "days":"TTR"},
];
makeCourses();
//makes the offered courses table
function makeCourses(){
var tbody = $('#courses tbody'),
props = ["class", "time", "days"];
$.each(courses, function(i, course) {
var tr = $('<tr> ');
$.each(props, function(i, prop) {
$('<td> ').html(course[prop]).appendTo(tr);
});
$('<td><input type="checkbox" class="add">').appendTo(tr);
tbody.append(tr);
});
};
//disables button if needed
$('.add').click(function(){
$('.AddB').prop('disabled', !$('.add:checked').length);
});
//moves list items to course scheduler
$('.AddB').click(function(){
$('.add:checked').appendTo('current');
$('.add:checked').remove('current');
makeCourses();
makeCurrent();
});
//list of dictionaries of current schedule
var current = [
{"class":"MATH 371","time": "10:30AM-11:45AM ", "days":"TR"},
{"class":"CMSC 285","time": "9:20AM-10:10AM ", "days":"MWF"},
{"class":"CMSC 284","time": "2:00PM-3:15PM ", "days":"T"},
];
makeCurrent();
//makes the current schedule table
function makeCurrent(){
var tbody = $('#current tbody'),
props = ["class", "time", "days"];
$.each(current, function(i, currentcourse) {
var tr = $('<tr> ');
$.each(props, function(i, prop) {
$('<td> ').html(currentcourse[prop]).appendTo(tr);
});
$('<td><input type="checkbox" class="remove">').appendTo(tr);
tbody.append(tr);
});
};
//disables button if needed
$('.remove').click(function(){
$('.removeB').prop('disabled', !$('.remove:checked').length);
});
//moves list items to course scheduler
$('.removeB').click(function(){
$('.remove:checked').appendTo('courses');
$('.remove:checked').remove('courses');
makeCurrent();
makeCourses();
});
//Make home page table
var tbody = $('#currentH tbody'),
props = ["class", "time", "days"];
$.each(current, function(i, currentcourse) {
var tr = $('<tr> ');
$.each(props, function(i, prop) {
$('<td> ').html(currentcourse[prop]).appendTo(tr);
});
$('<td>').appendTo(tr);
tbody.append(tr);
});
stripeTable();
});
----HTML File----
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!--Source for CSS-->
<title>Course Scheduler: Edit</title>
<link rel="stylesheet" type="text/css" href="scheduler.css">
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Course Schedule</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="home.html">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="edit.html">Edit <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<!--Intro to page-->
<center>
<div id="main-content">
<h3>Welcome to the Edit Page. This is where you add and remove classes. </h3>
<!--The current courses taking table-->
<form>
<table id="current">
<caption class="currentTitle">Current Schedule <button type="button"
class='removeB'disabled>Remove</button></caption>
<thead>
<tr>
<th>Course</th><th>Time</th><th>Days</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
<!--The courses offered table-->
<form>
<table id="courses">
<caption class="courseTitle">Courses <button type="button"
class='AddB'disabled>Add</button> </caption>
<thead>
<tr>
<th>Course</th><th>Time</th><th>Days</th>
</tr>
</thead>
<tbody >
</tbody>
</table>
</form>
</div>
</center>
<!--Source files for jquery and javascript-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="edit.js">
</script>
</body>
</html>
