I’m very new to this DataTable logic implementation concept and I have append the data to the DataTable and append successfully and in that DataTable controls I have written some event logic (ex: dropdown onchange and textbox oninput events) and those events are firing successfully and values are changing on other controls as well.

HTML logic:

<asp:Button ID="sb_add" runat="server" 
     OnClientClick="SB_Add_Legs(event); return false;" 
     Text="+ ADD" CssClass="btn btn-primary w-100 w-md-auto text-center px-4 spinbutton" />
<table class="table table-borderless rowSpace table-round-row dtr-inline SB_table dataTable  "
       id="strastrategy_builder_datatable" style="width: 100%;">
    <thead>
        <tr>
            <th>Action</th>
            <th>Instrument</th>
            <th>Expiry</th>
            <th>Strike</th>
            <th>Qty</th>
            <th>Future Price</th>
            <th>Price</th>
            <th>Delta</th>
            <th>Gamma</th>
            <th>Theta</th>
            <th>Vega</th>
            <th>IV</th>
            <th data-dt-order="disable"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

jQuery Add button entire logic:

function SB_Add_Legs(e) {
    e.preventDefault();
    var d_stg = '';
    var s_leg_data = "";
    var b_selected = '';
    var s_selected = '';
    var ddl_expdate = "";
    var ddl_strike = "";
    var ddl_inst = "";

    var lnt = $("#strastrategy_builder_datatable .aliceBlueRow").length;

    if (lnt > 0 && $("#hdn_sb_refresh_sh").val() === '1')
        $("#blurid").addClass("blur5"), $("#sb_refresh").show();

    if (lnt < 10) {

        var s = 'nifty;
        var s_bs = 'buy';
        var s_inst = 'ce';
        var s_stk = '12345';
        var s_ex = '30-07-1995';
        var s_q = '25;   
            var drpInstrumentValue = 'ce';
                var d_exp = '02-07-1990';
                var d_stk = s_stk;

                var ddl_bs = `<option value="Buy" ${s_bs.toLowerCase() === 'buy' ? "selected" : ""}>BUY</option>
                          <option value="Sell" ${s_bs.toLowerCase() === 'sell' ? "selected" : ""}>SELL</option>`;

                          
                    ddl_inst = `<option value="CE" ${drpInstrumentValue === "CE" ? "selected" : ""}>CE</option>
                               <option value="PE" ${drpInstrumentValue === "PE" ? "selected" : ""}>PE</option>
                               <option value="FUT" ${drpInstrumentValue === "FUT" ? "selected" : ""}>FUT</option>`;
                
               ddl_expdate = `<option value="2024-07-25">2024-07-25</options>
                               <option value="2024-07-26">2024-07-26</options>
                               <option value="2024-07-27">2024-07-27</options>`;

            ddl_strike = `<option value="24550">24550</options>
                            <option value="24560">24560</options>
                            <option value="24570">24570</options>`;
                                
                var FuturePrice = '24534';
                var Price = '224.50';
                var Delta = '0.4938';
                var Gamma = '0.0007';
                var Theta = '-19.3594';
                var Vega = '12.5474';
                var IV = '18.51';

                SB_Generate_Legs_Added_HTML(ddl_bs, ddl_inst, ddl_expdate,
                    ddl_strike, s_q, FuturePrice, Price, Delta, Gamma,
                    Theta, Vega, IV);

    }
    else {

        $("#perrormsg").html('');
        $("#perrormsg").html('You can add only a maximum of 10 rows');
        $("#modelpopupmsg").modal("show");

    }

    return false;
}

function SB_Generate_Legs_Added_HTML(ddl_bs, inst, ddl_expdate, ddl_strike, Qty, FuturePrice, Price, Delta, Gamma, Theta, Vega, IV) {

    var d_qty = $("#hdn_sb_lotsize").val();
    var s_inst = $("#sb_instrument").val();

    $("#strastrategy_builder_datatable").DataTable().destroy();
    var table = $('#strastrategy_builder_datatable').DataTable({});

    var action = ` <div class="d-inline-block ">
                      <select class="form-select border-0 analyserfields whiteBG" style="min-width: 80px;" name="sbaction" onchange="SB_Legs_Added_table_val_change('ddl',this);">
                          ${ddl_bs}
                      </select>
                  </div>`;

    var ddl_i = `  <select class="form-select border-0 analyserfields whiteBG" style="min-width: 80px;" name="sbinst" onchange="SB_Legs_Added_table_val_change('ddl',this);">
                      ${inst}
                  </select>`;

    var ddl_e = `  <select class="form-select border-0 analyserfields whiteBG ${s_inst === 'EQ' ? 'textDisable' : ''}" style="min-width: 130px;" ${s_inst === 'EQ' ? 'disabled' : ''} name="sbexp" onchange="SB_Legs_Added_table_val_change('ddl',this);">
                      ${ddl_expdate}
                  </select>`;

    var ddl_s = `  <select class="form-select border-0 analyserfields whiteBG ${s_inst === 'FUT' || s_inst === 'EQ' ? 'textDisable' : ''}" style="min-width: 100px;" ${s_inst === 'FUT' || s_inst === 'EQ' ? 'disabled' : ''} name="sbstrike" onchange="SB_Legs_Added_table_val_change('ddl',this);">
                      ${ddl_strike}
                  </select>`;

    var q = ` <div class="input-group flex-nowrap v-line pe-2">
                      <span class="input-group-text border-0 px-1"><i class="bi bi-dash textDanger pointer" onclick="SB_Legs_Added_table_minqty(${d_qty},this);"></i></span>
                      <input type="text" class="form-control text-center border-0 analyserfields whiteBG" name="sbqty" value=${Qty} autocomplete="off"
                          style="min-width: 70px;" maxlength='6' onblur="SB_Add_Leg_QtyValue(this);" oninput="SB_calculateqtylivenetprem('qty',this);"/>
                      <span class="input-group-text border-0 px-1"><i class="bi bi-plus textSuccess pointer" onclick="SB_Legs_Added_table_maxqty(${d_qty},this);"></i></span>
                  </div>`;

    var f = ` <input type="text" class="form-control border-0 analyserfields whiteBG" name="sbfprice" maxlength="9" style="min-width: 90px;" value=${FuturePrice}
             autocomplete="off" oninput="SB_Legs_Added_table_val_change('futprice',this);"/>`;

    var p = `<input type="text" class="form-control border-0 analyserfields whiteBG" name="sbprice" style="min-width: 90px;" maxlength="9" value=${Price}
                  autocomplete="off" oninput="SB_Legs_Added_table_val_change('price',this);"/>`;

    var d = ` <input type="text" class="form-control border-0 dull-pastel-greenBG analyserfields whiteBG" style="min-width: 90px;" maxlength="7" name="sbdelta"
                    value=${Delta}  oninput="this.value = this.value.replace(/[^0-9]/g, '')" disabled/>`;

    var g = ` <input type="text" class="form-control border-0 dull-pastel-greenBG analyserfields whiteBG" style="min-width: 90px;" maxlength="7" name="sbgamma"
                      value=${Gamma}  oninput="this.value = this.value.replace(/[^0-9]/g, '')" disabled/>`;

    var t = ` <input type="text" class="form-control border-0 dull-pastel-greenBG analyserfields whiteBG" style="min-width: 100px;" maxlength="7" name="sbtheta"
                       value=${Theta}  oninput="this.value = this.value.replace(/[^0-9]/g, '')" disabled/>`;

    var v = ` <input type="text" class="form-control border-0 dull-pastel-greenBG analyserfields whiteBG" style="min-width: 100px;" maxlength="7" name="sbvega"
                     value=${Vega}  oninput="this.value = this.value.replace(/[^0-9]/g, '')" disabled/>`;

    var iv = ` <input type="text" class="form-control border-0 analyserfields whiteBG" name="sbiv" style="min-width: 100px;" maxlength="6" autocomplete="off"
                      value=${IV}  oninput="SB_Legs_Added_table_val_change('iv',this);" />`;

    var dlt = `<a href="javascript://" class="px-2 py-1 fs-6 analyserfields " name="sbdelete" onclick="SB_DeleteLegs(event,this)">
                      <i class="bx bxs-trash-alt text-danger"></i>
                  </a>`;

    table.row
        .add([
            action,
            ddl_i,
            ddl_e,
            ddl_s,
            q,
            f,
            p,
            d,
            g,
            t,
            v,
            iv,
            dlt,
        ])
        .draw(false);


    $("#strastrategy_builder_datatable").DataTable().destroy();
    $("#strastrategy_builder_datatable").DataTable({
        ordering: false,
        info: false,
        paging: false,
        searching: false,
        responsive: true,
        language: {
            emptyTable: " ",
        },
        columnDefs: [
             {
                responsivePriority: 1, //column view
                targets: 0 //column name
            },
            {
                responsivePriority: 2,
                targets: 1
            },
            {
                responsivePriority: 4,
                targets: 2
            },
            {
                responsivePriority: 5,
                targets: 3
            },
            {
                responsivePriority: 7,
                targets: 4
            },
            {
                responsivePriority: 6,
                targets: 11
            },
            {
                className: 'dt-center',  // delete icon response column position 3
                width: '50px',
                responsivePriority: 3,
                targets: -1
            },
        ],
        createdRow: function (row, data, dataIndex) {
            $(row).addClass('aliceBlueRow');
        }
    });
}

Here are some screenshots for illustration.

Initially if I click on the Add button row is appending to the DataTable

And I clicked on the DataTable dropdown icon

The Theta and Vega values are showing like -19.3594 and 12.5474

And I enter some value on the IV column 845 and dependent columns values will change ex:- Theta and Vega columns values are changed

And if I click on the same dropdown of DataTable icon the previous values are coming instead on new values on the Theta and Vega

In this img the IV values845 didn’t change but the Theta and Vega values are changed

Please suggest how to achieve this and why those values are changing and values should not change until any event should fire.

I’m not sure I explained correctly hope you understood my problem.

Sorry for my bad English