JSFiddle - React, Tailwind, and code Playground

by slash197

HTML

<input id="TaskId" name="TaskId" type="hidden" value="18" />
    <div id="MainDiv">
        <div id="toClone">
            <div style="display: inline;">
                <select id="Tasksess">
                    <option value="">لطفاً کار را انتخاب کنيد</option>
                    <optgroup label="کار های جديد">
                            <option value="16"style="">q3fe</option>
                            <option value="18"style="">fjhv j</option>
                            <option value="19"style="">wref</option>
                            <option value="25"style="">ff</option>
                    </optgroup>
                    <optgroup label="کار های در دست اقدام">
                            <option value="13"style="">rr</option>
                            <option value="15"style="">yy</option>
                    </optgroup>
                    <optgroup label="کار های تمام شده">
                            <option value="14"style="">tt</option>
                            <option value="18"style="">fjhv j</option>
                    </optgroup>
                </select>
            </div>
            <div style="display: inline;">
                <select id="Statusess" name="Statusess">
                    <option value="">لطفاً وابستگی را انتخاب کنيد</option>
                    <option value="1">پيشنياز</option>
                    <option value="2">همنياز</option>
                </select>
            </div>
            <div style="display: none;" id="Ok">
                ok
            </div>
            <div style="display: none;" id="noOk">
                تکراری
            </div>
            <div id="loadingGif" style="display: none;">
                <img src="/Content/Images/ajax-loader/253L.gif" alt=""/>
            </div>
        </div>
    </div>

JavaScript

$(document).ready(function () {

            var Maindiv = $("#MainDiv");
            var toClone = $("#toClone");

            //$("#Statusess").each(function () {
                $("#MainDiv").delegate('#Statusess', 'change', function () {
                    if ($(this).find(":selected").val() != "") {                    
                        if ($(this).parent().prev().find(":selected").val() != "") {
                            $(this).parent().parent().find("#loadingGif").attr("style", "display: inline;");
                            $.ajax({
                                url: '/ProjectAdmin/Project/AddTaskDependency?MainTaskId=' + $("#TaskId").val() + '&DependentTaskId=' + $(this).parent().prev().find(":selected").val() + '&Status=' + $(this).find(":selected").val(),
                                type: 'GET',
                                success: function (data, status) {
                                    if (data != "0") {
                                        $(this).parent().parent().find("#Ok").css('display', 'inline');
                                        $(this).parent().parent().find("#noOk").css('display', 'none');
  alert("1");
                                    }
                                    else if (data == "0") {
                                        $(this).parent().parent().find("#Ok").css('display', 'none');
                                        $(this).parent().parent().find("#noOk").css('display', 'inline');
  alert("2");
                                    }
                                    var div = $('div:eq(0)', Maindiv).clone();
                                    Maindiv.append(div);
                                }
                            });
                            $(this).parent().parent().find("#loadingGif").attr("style", "display: none;");

                        }
                    }
                });
            //});

        });