JSFiddle - React, Tailwind, and code Playground

by billjohnston4

HTML

<form action="tvbill.php" method="GET" name="tvbillform">
    <table class="persontitle">
        <tr>
            <td>
                <input type="submit" class="button" id="cancelCable" name="cancelCable" value="Cancel Cable">
                <input type="submit" class="button" id="nonpayment" name="nonpayment" value="Non-Payment">
            </td>
        </tr>
    </table>
    <div id="addtransaction">
        <div class="addedtrans">
            <div>
                <label class="labeltitle">Complete Transaction</label>
                <input type="submit" value="Complete Transaction" id="completecreditrx" name="completecreditrx" class="buttonlarge buttonmargin">
                <input type="button" value="Cancel Transaction" id="cancelcreditrx" name="cancelcreditrx" class="buttonlarge">
            </div>
            <div>
                <label for="billingdate" class="labeltitle">Transaction Date:
                    <input type="text" id="billingdate" name="billingdate" class="datepick hasDatepicker">
                </label>
            </div>
            <div>
                <label for="cabletransamt" class="labeltitle">Transaction Amount
                    <input type="text" id="cabletransamt" name="cabletransamt" class="automoney">
                </label>
            </div>
            <div>
                <label for="cabletranstype" class="labeltitle">Transaction Type
                    <select id="cabletranstype" name="cabletranstype">
                        <option value="7">choice one</option>
                        <option value="10">Credit</option>
                    </select>
                </label>
            </div>
        </div>
    </div>

JavaScript

$(function () {
    $("#cancelcreditrx").click(function () {
        var addbutton = $("<input>", {
            'type': 'button',
            'id': 'addTrx',
            'name': 'addTrx',
            'value': 'Add Cable Transaction',
            'class': 'buttonlarge'
        });
        $(".addedtrans").remove();
        $("#nonpayment").after(addbutton);
    })
})