JSFiddle - React, Tailwind, and code Playground

by ks2512

HTML

<select data-bind="options: AllCourses,
                   optionsText: 'CourseName',
                   optionsValue: 'Id'"></select>

<h2>Enrolled Students</h2>
<table>
    <thead>
        <tr>

            <th></th>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: EnrolledStudents">
       <tr>
           <td><button data-bind="click: $parent.remove">Remove</button></td>
           <td data-bind="text: StudentId"></td>
           <td data-bind="text: FirstName"></td>
           <td data-bind="text: LastName"></td>
       </tr>
    </tbody>
</table>

<h2>All Students</h2>
<table>
    <thead>
        <tr>
            <th></th>
            <th>StudentID</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: AllStudents">
       <tr data-bind="visible:!isEnrolled()">
           <td><button data-bind="click: $parent.add">Add</button></td>
           <td data-bind="text: StudentId"></td>
           <td data-bind="text: FirstName"></td>
           <td data-bind="text: LastName"></td>
       </tr>
    </tbody>
</table>

JavaScript

var students = [{"$id":"1","Id":1,"FirstName":"Joe","LastName":"User","StudentId":1234567},{"$id":"2","Id":2,"FirstName":"Betty","LastName":"Rogers","StudentId":2345678},{"$id":"3","Id":3,"FirstName":"Steven","LastName":"Sanders","StudentId":3456789}];

var courses = [{"$id":"1","Id":1,"CourseName":"CptS 122"},{"$id":"2","Id":2,"CourseName":"CptS 223"}];

function AppViewModel() {
      
              this.AllStudents=ko.observableArray(ko.utils.arrayMap(students,function(student){
         student.isEnrolled = ko.observable(false);
        console.log(student);
        return student;
    }));
    console.log(this.AllStudents());
               
                this.AllCourses = ko.observableArray(courses);
                this.EnrolledStudents = ko.observableArray();
                this.CurrentCourse = ko.observable("1");
             
                
                var self = this;

                this.add = function (item) {
                 
                    item.isEnrolled(true);
                     self.EnrolledStudents.push(item);
                }

                this.remove = function (item) {
                
                    item.isEnrolled(false);               
                    self.EnrolledStudents.remove(item);
                }


          
                
               
  
            }

            ko.applyBindings(new AppViewModel());