Reset formularza nie działa.

Mam taki problem jak za pomocą ajax zresetować formularz
I tutaj wysyłam pola do skryptu PHP i są też do zaznaczenia pola i moge je odznaczać jak np. te id}}">{{$list->name}}

<form method='get' id="form2">
                        <table class='table table-bordered'>
                            <tr>
                                <td rowspan='2' style='padding-top: 35px; ' class='value'>
                                    Godzina zaczęcia
                                </td>
                                <td class='borderless'>
                                    <input type='date' name='dateStart' class='form-control' value='{{ date("Y-m-d")}}'>
                                </td>
                            </tr>
                            <tr>
                                <td class='borderless'>
                                     <input type='time' name='timeStart' class='form-control'>
                                </td>
                            </tr>
                            <tr>
                                <td rowspan='2' style='padding-top: 35px; ' class='value'>
                                    Godzina zakończenia
                                </td>
                                <td>
                                    <input type='date' name='dateEnd' class='form-control' value='{{ date("Y-m-d")}}'>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type='time' name='timeEnd' class='form-control' onkeypress="addMood('{{ route('Mood.Add')}}')">
                                </td>
                            </tr>
                            <tr>
                                <td class='value'>
                                    Poziom nastroju
                                </td>
                                <td>
                                    <input type='text' name='moodLevel' class='form-control' onkeypress="addMood('{{ route('Mood.Add')}}')">
                                </td>
                            </tr>
                            <tr>
                                <td class='value'>
                                    Poziom lęku
                                </td>
                                <td>
                                    <input type='text' name='anxietyLevel' class='form-control' onkeypress="addMood('{{ route('Mood.Add')}}')">
                                </td>
                            </tr>
                            <tr>
                                <td class='value'>
                                    Poziom napięcia
                                </td>
                                <td>
                                    <input type='text' name='voltageLevel' class='form-control' onkeypress="addMood('{{ route('Mood.Add')}}')">
                                </td>
                            </tr>
                            <tr>
                                <td class='value'>
                                    Poziom pobudzenia
                                </td>
                                <td>
                                    <input type='text' name='stimulationLevel' class='form-control' onkeypress="addMood('{{ route('Mood.Add')}}')">
                                </td>
                            </tr>
                            <tr>
                                <td class='value'>
                                    Ilośc epizodów psychotycznych
                                </td>
                                <td>
                                    <input type='number' name='epizodesPsychotic' class='form-control' value='0' min='0' onkeypress="addMood('{{ route('Mood.Add')}}')">
                                </td>
                            </tr>
                             <tr>
                                <td class='value'  style='padding-top: 30%; ' rowspan="2">
                                    Co robiłem
                                </td>
                                <td>
                                    <textarea name='whatWork' class='form-control' rows='7'></textarea>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div  style="overflow-y: scroll;  height:250;">
                                    @foreach ($Action as $list)
                                        <a class="Action___" id = "{{$list->id}}">{{$list->name}}</a> |
                                    @endforeach
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" class="center">
                                    <input type="button" onclick="addMood('{{ route('Mood.Add')}}')" class="btn btn-success" value="Dodaj nastrój" >
                                </td>
                            </tr>    
                            <tr>
                                <td colspan="2" class="center">
                                    <div class="ajax" id="form"></div>
                                </td>
                            </tr>
                        </table>
                    </form>

var actionList = [];


$(document).ready(function(){
    $(".Action___").click(function(){
     if (getNumber($(this).attr("id"),actionList)) {
        actionList.remove($(this).attr("id"));
        $(this).css("background-color","transparent");
        $(this).css("border-radius",'0px');
        $(this).css("color","#4288BA");
    }
    else {
        actionList.push($(this).attr("id"));
        $(this).css("background-color","#95721F");
        $(this).css("border-radius",'30px');
        $(this).css("color","white");
    }
    //alert(actionList.length);
    });
});
Array.prototype.remove=function(s){
                        for(i=0;i<s.length;i++){
                           if(s==this[i]) this.splice(i, 1);
                        }
                }
                
const getNumber = function ( num, arr ) {
    return arr.includes( num );
}

function addMood(url) {
    changeArrayAtHidden();
    //alert($("form").serialize());
    //deleteArray();
    //$('form')[0].reset();
    //$('#form2')[0].reset();
    $("#form").load(url + "?" + $("form").serialize());
    
    //alert("dd");
    

    
    
}

function changeArrayAtHidden() {
    for (i=0;i < actionList.length;i++) {
        if (isIst(actionList[i])) {
            $("form").append("<input type=\'hidden\' name=\'idAction[]\' value=" + actionList[i] + " class=\'form-control typeMood\'>");
        }
    }
}
function isIst(id) {
    if (actionList.length == 0) {
        return false;
    }
    for (i=0;i < actionList.length;i++) {
        if (actionList[i] == id) {
            return true;
            
        }
    }
    return false;
}
function deleteArray() {
    for (i=0;i < actionList.length;i++) {
        actionList.splice(i, 1);
    }
}

No i teraz chodzi o to, że w momencie kiedy jest akacja wyślij fomrularz to pamięta niektóre pola i ich nie resetuje nawet ja je odznacze

Nikt naprawdę nie wie
A może źle wytłumaczyłem ?
No chodzi o to, żeby w momecie kliknięcia na przycick dodaj resetowało wszystkie wartości zmiennych, a to tego nie robi.

document.getElementById("form2").reset(); 

Juz wiem jak to wytłumaczyć tu chodzi tez o funkcje changeArrayAtHidden(); która dodaje do formularza poszczególne zaznaczone obiekty i potem je musi wyczyścić za pomocą deleteArray() tylko to czyszczenie troche nie działa bo to musi pamiętac, które obiekety są zaznaczone, a które nie.

Edit

Tutaj zobaczyłem, że chodzi też o ta funkcje

actionList.remove($(this).attr("id"));
Array.prototype.remove=function(s){
                        for(i=0;i<s.length;i++){
                           if(s==this[i]) this.splice(i, 1);
                           //alert(this[i]);
                        }
                }

gdzie jak najedziemy i odznaczymy div to ma usunąć z tej tablicy ten element tablicy ale nie usuwa

Jak dam
alert(this[i]);
to wyskoczy

undefined

var actionList = [];


$(document).ready(function(){
    $(".Action___").click(function(){
     if (getNumber($(this).attr("id"),actionList)) {
        actionList.remove($(this).attr("id"));
        $(this).css("background-color","transparent");
        $(this).css("border-radius",'0px');
        $(this).css("color","#4288BA");
    }
    else {
        actionList.push($(this).attr("id"));
        $(this).css("background-color","#95721F");
        $(this).css("border-radius",'30px');
        $(this).css("color","white");
    }
    //alert(actionList.length);
    });
});
Array.prototype.remove=function(s){
                        for(i=0;i<actionList.length;i++){
                           //alert(actionList[i]);
                           if(s==actionList[i]) actionList.splice(i, 1);
                           //alert(actionList[i]);
                        }
                }
                
const getNumber = function ( num, arr ) {
    return arr.includes( num );
}

function addMood(url) {
    //alert(actionList.length);
    changeArrayAtHidden();
    //alert($("form").serialize());
    
    //$('form')[0].reset();
    //$('#form2')[0].reset();
//    document.getElementById("form2").reset();
    $("#form").load(url + "?" + $("#form2").serialize());
    
    deleteArray();
    //alert("dd");
    

    
    
}

function changeArrayAtHidden() {
    for (i=0;i < actionList.length;i++) {
        if (isIst(actionList[i])) {
            $("#form2").append("<input type=\'hidden\' name=\'idAction[]\' value=" + actionList[i] + " class=\'form-control typeMood\'>");
        }
    }
}
function isIst(id) {
    if (actionList.length == 0) {
        return false;
    }
    for (i=0;i < actionList.length;i++) {
        if (actionList[i] == id) {
            return true;
            
        }
    }
    return false;
}
function deleteArray() {
    $("#parentsAction").children().css("background-color","transparent").css("border-radius",'0px').css("color","#4288BA");
    for (i=0;i < actionList.length;i++) {
        //alert(actionList[i]);
        actionList.splice(i, 1);
    }
}

Zmodyfikowałęm trochę kod i to mnie dziwi że funkcja deleteArray() rzeczywiście usuwa elemty tablicy i potem jak dam alert(actionList[i]); za actionList.splice(i, 1); to drukuje undefined ale nadal po stronie serwera drukuje te elemeyt tablicy.

Juz wiem gdzie był problem trzeba było na początku funkcji addMood()
dać

$("#form2").find(":hidden").filter("[name!='idAction']").remove();

Reset formularza?
Chodzi o coś w rodzaju https://www.w3schools.com/tags/att_input_type_reset.asp ?
Z tego co wiem to od takich funkcji się odchodzi, ale ja siedzę w backendzie.
@czysteskarpety, mam rację?