JSFiddle - React, Tailwind, and code Playground

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" style="list-style-type:none">
            <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" data-bind="click:$root.add">
                            <span class="glyphicon glyphicon-plus-sign" style="text-align:right"></span>
                        </button>
                        <button...

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),
            add: function (data) {
                if (data.PostCodeStart === "" || data.PostCodeEnd === "" || data.Mileage === "") {
                    alert("empty field");
                }
                else {
                    viewModel.journeyList.push({ PostCodeStart: data.PostCodeStart, PostCodeEnd: data.PostCodeEnd, Mileage: data.Mileage, Notes: data.Notes });
                }
            },

            remove: function (data) {
                viewModel.journeyList.remove(data);
            }
        };

        $(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);
    }
});