JSFiddle - React, Tailwind, and code Playground

by Academia

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

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