<td class="currency">
    <div>
        <input class="difference_textbox" type="text" value="0.00" style="display: none;" />
    </div>
</td>
<td>
    <div>
        <select style="display: none;" class="adj_reason_select">
            <option></option>
        </select>
    </div>
</td>

// Let this function represent the function called on `difference` change.
ReceivePayment._addAdjustment = function ReceivePayment$_addAdjustment(e) {
    var self = $(e.target);
    var customerInvoice = self.parents('.customer_invoice');
    var amountPaidBox = customerInvoice.find('.amount_to_pay_input');
    // ...
    var amountPaidTD = amountPaidBox.closest('td');
    var diffTextBoxTD = ReceivePayment._duplicateInputControl(amountPaidTD);
    var adjReasonSelectTD = ReceivePayment._duplicateInputControl(diffTextBoxTD);
    // ...
}

ReceivePayment._duplicateInputControl = function ReceivePayment$_duplicateInputControl(td) {
    // This is very verbose so that I can stop at any point and
    // examine what I've got.
    var o = td.next();       // Grab the next td.
    var divs = o.children(); // Grab the div(s) contained within the td.
    var div = divs.last();   // Grab the last div within the td.
    // And here's where all my gyrations occur, infinite permutations
    // of jQuery calls, not one permutation of which has succeeded in
    // adding the contents of the final div to the list of divs.
    var d = div[0];
    var html = d.outerHTML;
    var s = html.toString();
    div.add(s);
    return o;
}