ASP.Net: Calculate dynamic TextBox value using jQuery based on condition

Hi kankon,

Refer below sample.

HTML

<asp:Panel ID="Panel_workertotal" runat="server" Visible="true">
    <table align="center" style="border: medium solid #000000; font-family: Arial, Helvetica, sans-serif;" class="auto-style64">
        <tr>
            <td class="auto-style88" style="border: thin solid #000000;">
                <asp:Label ID="Label37" runat="server" ForeColor="Blue" Text="StartDate" Font-Bold="True" Font-Names="Arial" Font-Size="Large"></asp:Label>
            </td>
            <td class="auto-style88" style="border: thin solid #000000;" colspan="2">
                <asp:TextBox ID="TextBox15" runat="server" TextMode="Date" Width="365px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="auto-style90" style="border: thin solid #000000;">
                <asp:Label ID="Label40" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="Large" ForeColor="Red" Text="EndDate"></asp:Label>
            </td>
            <td class="auto-style88" style="border: thin solid #000000;" colspan="2">
                <asp:TextBox ID="TextBox16" runat="server" TextMode="Date" Height="16px" Width="363px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="auto-style90" style="border: thin solid #000000;">
                <asp:Label ID="Label43" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="Large" ForeColor="Black" Text="WorkerSalary"></asp:Label>
            </td>
            <td class="auto-style88" style="border: thin solid #000000;">
                <asp:TextBox ID="fcivilid7" runat="server" placeholder="الرقم المدنى" Font-Size="Medium" ForeColor="Black" Font-Names="Arial" Font-Bold="True" Width="150px" BorderStyle="Solid">0</asp:TextBox>
            </td>
            <td class="auto-style88" style="border: thin solid #000000;">
                <asp:TextBox ID="fcivilid1" runat="server" placeholder="الرقم المدنى" Font-Size="Large" ForeColor="#33CC33" Font-Names="Arial" Font-Bold="True" Width="100px" BorderStyle="None">0</asp:TextBox>
                <asp:TextBox ID="TextBox47" runat="server" BorderStyle="None" Font-Bold="True" Font-Names="Arial" Font-Size="Large" ForeColor="Blue" placeholder="الرقم المدنى" Width="100px">0</asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="auto-style90" style="border: thin solid #000000;">
                <asp:Label ID="Label44" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="Large" ForeColor="Black" Text="UsingPC"></asp:Label>
            </td>
            <td class="auto-style88" style="border: thin solid #000000;">
                <asp:TextBox ID="fcivilid8" runat="server" placeholder="الرقم المدنى" Font-Size="Medium" ForeColor="Black" Font-Names="Arial" Font-Bold="True" Width="150px" BorderStyle="Solid">0</asp:TextBox>
            </td>
            <td class="auto-style88" style="border: thin solid #000000;">
                <asp:TextBox ID="fcivilid4" runat="server" placeholder="الرقم المدنى" Font-Size="Large" ForeColor="#33CC33" Font-Names="Arial" Font-Bold="True" Width="100px" BorderStyle="None">0</asp:TextBox>
                <asp:TextBox ID="TextBox46" runat="server" BorderStyle="None" Font-Bold="True" Font-Names="Arial" Font-Size="Large" ForeColor="Blue" placeholder="الرقم المدنى" Width="100px">0</asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="auto-style90" style="border: thin solid #000000;">
                <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="Large" ForeColor="Black" Text="ExtraTime"></asp:Label>
            </td>
            <td class="auto-style88" style="border: thin solid #000000;">
                <asp:TextBox ID="fcivilid9" runat="server" placeholder="الرقم المدنى" Font-Size="Medium" ForeColor="Black" Font-Names="Arial" Font-Bold="True" Width="150px" BorderStyle="Solid" AutoPostBack="True">0</asp:TextBox>
            </td>
            <td class="auto-style88" style="border: thin solid #000000;">
                <asp:TextBox ID="TextBox2" runat="server" placeholder="الرقم المدنى" Font-Size="Large" ForeColor="#33CC33" Font-Names="Arial" Font-Bold="True" Width="100px" BorderStyle="None">0</asp:TextBox>
                <asp:TextBox ID="TextBox45" runat="server" BorderStyle="None" Font-Bold="True" Font-Names="Arial" Font-Size="Large" ForeColor="Blue" placeholder="الرقم المدنى" Width="100px">0</asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="auto-style88" style="border: thin solid #000000;" colspan="2">
                <asp:Label ID="Label50" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="Large" ForeColor="Red" Text="Total"></asp:Label>
            </td>
            <td class="auto-style88" style="border: thin solid #000000;">
                <asp:TextBox ID="fcivilid6" runat="server" placeholder="الرقم المدنى" Font-Size="Large" ForeColor="Red" Font-Names="Arial" Font-Bold="True" Width="100px" BorderStyle="None">0</asp:TextBox>
            </td>
        </tr>
    </table>
    <br />
</asp:Panel>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('[id*=TextBox16]').on('input', function () {
            var content15 = $('[id*=TextBox15]').val();
            var content16 = $('[id*=TextBox16]').val();
            if (content15 && content16) {
                content15 = new Date(content15);
                content16 = new Date(content16);
                if (content15.getTime() && content16.getTime()) {
                    var content1 = Math.ceil((content16 - content15) / (1000 * 60 * 60 * 24));
                    $('[id*=fcivilid1]').val(content1);
                    $('[id*=TextBox2]').val(content1);
                    $('[id*=fcivilid4]').val(content1);
                } else {
                    alert('invalid date formate');
                }

            } else {
                alert('Both date not selected');
            }
        });

        if ($('[id*=fcivilid1]').val() != '') {
            $('[id*=fcivilid7]').on('input', function () {
                var content7 = $('[id*=fcivilid7]').val();
                var content1 = $('[id*=fcivilid1]').val();
                $('[id*=TextBox47]').val(Math.min((content7 * content1) / 30));
                updateTotal();
            });

            $('[id*=fcivilid8]').on('input', function () {
                var content8 = $('[id*=fcivilid8]').val();
                var content1 = $('[id*=fcivilid1]').val();
                $('[id*=TextBox46]').val(Math.min((content8 * content1) / 30));
                updateTotal();
            });

            $('[id*=fcivilid9]').on('input', function () {
                var content9 = $('[id*=fcivilid9]').val();
                var content1 = $('[id*=fcivilid1]').val();
                $('[id*=TextBox45]').val(Math.min((content9 * content1) / 30));
                updateTotal();
            });
        }
    });

    function updateTotal() {
        var value1 = parseFloat($('[id*=TextBox45').val());
        var value2 = parseFloat($('[id*=TextBox46]').val());
        var value3 = parseFloat($('[id*=TextBox47]').val());
        var total = value1 + value2 + value3;
        $("[id*=fcivilid6]").val(total);
    }
</script>

Screenshot