JSFiddle - React, Tailwind, and code Playground

by santoshkda02

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<div id="test">
    <div style="width: 500px">
        <button data-bind="click: $root.addColor" class="btn btn-primary">Add New Color</button>
        <table class="table table-striped table-bordered table-condensed">
            <thead>
                <tr>
                    <th style="width: 10px">Select</th>
                    <th>Name</th>
                    <th>MFR</th>
                    <th>MSRP</th>
                    <th>Code</th>
                    <th></th>
                </tr>
            </thead>
            <tbody data-bind="foreach: IntColors">
                <tr>
                    <td style="width: 12px!important">
                        <input type="radio" name="IntColor" data-bind="checked: $parent.choicedColor" />
                       
                    </td>
                    <td data-bind="text: GenericName"></td>
                    <td data-bind="text: MFRName"></td>
                    <td data-bind="text: MSRP"></td>
                    <td data-bind="text: ColorCode"></td>
                    <td> <span class="glyphicon glyphicon-pencil" style="cursor: pointer" data-bind="click: $root.editColor"></span>

                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="modal fade" data-bind="modal: { backdrop: 'static', keyboard: false, show: modalVisible }">
        <div class="modal-dialog" data-bind="with: SelectedColor">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-bind="click: $root.closeModal">&times;</button> <span...

CSS

table input[type=radio] {
     width: 12px!important;
 }

JavaScript

$(document).ready(function () {
    ko.validation.init({
        errorElementClass: 'has-error',
        errorMessageClass: 'help-block',
        decorateInputElement: true
    });

    ko.validation.rules.pattern.message = 'Invalid.';
    ko.validation.configure({
        registerExtenders: true,
        messagesOnModified: true,
        insertMessages: true,
        parseInputAttributes: true,
        messageTemplate: null
    });

    var ColorModel = function (genName, mfrName, msrp, colorCode) {
        var self = this;
        self.GenericName = ko.observable(genName).extend({
            required: true,
            minLength: 2,
            maxLength: 20
        });
        self.MFRName = ko.observable(mfrName).extend({
            required: true,
            minLength: 2,
            maxLength: 20
        });
        self.MSRP = ko.observable(msrp).extend({
            required: true,
            number: true
        });
        self.ColorCode = ko.observable(colorCode).extend({
            required: true,
            minLength: 3,
            maxLength: 6
        });
    };

    function vm() {
        var self = this;
    
           self.SaveChanges = function (data, event) {
                var result = ko.validation.group(data, { deep: true });
                if (!data.isValid()) {
                    result.showAllMessages(true);
                }
                else {
                    self.modalVisible(false);
                }
            };

      
        self.choicedColor = ko.observable();
        self.modalVisible = ko.observable(false);
        self.IntColors = ko.observableArray([]);
        self.SelectedColor = ko.observable();
        self.OperationMode = ko.observable();
        self.editColor = function (data, event) {
            self.OperationMode('E');
            self.SelectedColor(data);
            self.modalVisible(true);
        };
        self.addColor = function (data, event) {
            self.OperationMode('A');
       ...