JSFiddle - React, Tailwind, and code Playground

by tonymaloney1971

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 <div class="form-horizontal">

        <div class="panel panel-default">
            <div class="panel-heading text-center ">Journey Details</div>
        </div>

        <div class="form-group">
            <label for="PostCodeStart" class="col-sm-2 control-label">Start Post Code</label>
            <label for="PostCodeEnd" class="col-sm-2 control-label">End Post Code</label>
            <label for="Mileage" id="Mileage" class="col-sm-2 control-label">Mileage</label>
            <label for="Notes" class="col-sm-2 control-label">Notes</label>
        </div>

        <ul data-bind="foreach: journeyList">
            <li class="tagItem">
                <div class="form-group">
                    <div class="col-sm-2">
                        <input type="text" data-bind="value: PostCodeStart" class="form-control" placeholder="Postcode" />
                    </div>

                    <div class="col-sm-2">
                        <input type="text" data-bind="value: PostCodeEnd" class="form-control" placeholder="Postcode" />
                    </div>

                    <div class="col-sm-2">
                        <input type="number" data-bind="value: Mileage" class="form-control" placeholder="Mileage" />
                    </div>

                    <div class="col-sm-2">
                        <input type="text" data-bind="value: Notes" class="form-control" placeholder="Enter Notes" />
                    </div>

                    <div class="col-sm-2">
                        <button class="btn-success img-rounded" id="Add">
                            <span class="glyphicon glyphicon-plus-sign" style="text-align:right"></span>
                        </button>
                        <button class="btn-danger img-rounded" id="Delete">
                    ...

CSS

body {
            margin: 30px;
        }

        .error {
            color: red;
            font-size: 0.8em;
        }

JavaScript

$(document).ready(function () {
    try {
        var data = [{ PostCodeStart: "", PostCodeEnd: "", Mileage: "", Notes: "" }];
        
        var viewModel = {
            journeyList: ko.observableArray(data),
            PostCodeStart: ko.observable(),
            //PostCodeEnd: ko.observable(),
            //Notes: ko.observable(),
            //Mileage: ko.observable(),

            add: function () {
                alert("How do I get the value of PostCodeStart");
                if (this.PostCodeStart() === "" || this.PostCodeEnd() === "" || this.Mileage() === "") {
                    alert("empty field");
                }
                else
                    this.journeyList.push({ PostCodeStart: this.PostCodeStart(), PostCodeEnd: this.PostCodeEnd(), Mileage: this.Mileage(), Notes: this.Notes() });
            },

            remove: function (self) {
                var itemToRemove = ko.dataFor(self);
                this.journeyList.remove(itemToRemove);
            }


        };

        $(document).on("click", "#Add", function () {

            viewModel.add(this);
        });

        $(document).on("click", "#Delete", function () {
            //we have to pass this( the selected item )  into the viewModel as this would have no context inside viewModel
            viewModel.remove(this);
        });


        $(".close").click(function () {
            $("#myAlert").alert('close');
        });

        ko.applyBindings(viewModel);

    } catch (e) {
        alert("Error:" + e.message);
    }
});