jQuery .on('change') function not working after cloning a row

Question

In my input form I have an on click set up with an ajax call to submit a table row to my database. When the user submits, it submits the row and then clones it so the user can enter more data if they need to. For the input selects on my form one value is tied to the value of a different one. To be more clear one my input value is units and the unit value depends on whatever the previous input value is. I have this on change set up so that when the user selects a commodity value, it automatically sets the unit value associated to the commodity value. Right now this only works for the first row and none of the cloned rows.

$(".commodity").on("change", () => {
        if ($(".commodity").val() === 'CHW'){
            $(".unit").val("tonhr")
        }
        if ($(".commodity").val() === 'ELE'){
            $(".unit").val("kWh")
        }
        if ($(".commodity").val() === 'STM'){
            $(".unit").val("lb")
        }
        if ($(".commodity").val() === 'HHW'){
            $(".unit").val("mmbtu")
        }
        if ($(".commodity").val() === 'GAS'){
            $(".unit").val("CCF")
        }
        if ($(".commodity").val() === 'WATER'){
            $(".unit").val("kgal")
        }
        if ($(".commodity").val() === 'PEAK_CHW'){
            $(".unit").val("ton")
        }
        if ($(".commodity").val() === 'LABOR'){
            $(".unit").val("Hours")
        }
    })

This is the on click funtion that submits the current row to the database and then creates a new row for additional data entry. When the new row is cloned the above logic doesnt work anymore. When I select a value for commodity, it doesnt automatically set the unit value anymore. If anyone has any ideas on how I can get the cloned rows to automatically set the unit value it would be greatly appreciated!

$('#tableData').on('click', 'button.addRowB', function (e) {

        const cloneRow = $('#tableData tbody tr').first();
        e.preventDefault();
        let data = {
            project_id: getPid,
            commodity: $(".commodity").last().val(),
            unit: $(".unit").last().val(),
            value: $(".value").last().val(),
        }
        $.ajax({
            url: '/baseline',
            type: 'POST',
            data: data
        }).then(
            cloneRow.clone().appendTo('#tableData tbody').find(".value").val(''),
            $("#next").removeAttr('disabled'),
            $("#link").attr('href', '/savings')
        )

    })

Answer 1

With dynamic event listeners, you need to create a delegated event by setting the listener on a static object, and pass the target as a reference, like so:

$("#tableData").on("change", ".commodity", () => {

Then, take advantage of $(this) which in context of the listener is the target. Then you can leverage $(this) to find the appropriate .unit element

if ($(this).val() === 'CHW') $(this).closest('tr').find(".unit").val("tonhr")
if ($(this).val() === 'ELE') $(this).closest('tr').find(".unit").val("kWh")
// etc...

which is saying.. if the element clicked on == value, then find the element with class .unit starting from the nearest surrounding <tr> tag