JavaScript list sorting by date and type. How can I improve my code? [closed]

I'm a junior developer. And I want to learn the good way to code. The code I will show you is working, but I feel like its all messy and longer that it should be. It is simply a .js, a .html and some css that render a list of informations about scans. The list come from Firebase (Google Analytics).

Here is the code I suspect of being messy - it's a script that sort the 'li' components of the list each time a date is entered or a selection is made (or both).

<script>

    function myFunction() {
        // Declare variables
        var input, input2, filter, filter2, ul, li, a, i, txtFirstValue, txtThirdValue, txtFourthValue;
        input = document.getElementById('myInput');
        input2 = document.getElementById('myInput2');
        filter = input.value.toUpperCase();
        filter2 = input2.value.toUpperCase();
        ul = document.getElementById("Scan-list");
        li = ul.getElementsByTagName('li');
        counter = 0;
        test = li[0].getElementsByTagName("span")[3];

          // Loop through all list items, and hide those who don't match the search query (date 1 to date 2)
          for (i = 0; i < li.length; i++) {
            scanFirstValue = li[i].getElementsByTagName("span")[0];
            scanThirdValue = li[i].getElementsByTagName("span")[2];
            scanFourthValue = li[i].getElementsByTagName("span")[3];
            txtFirstValue = scanFirstValue.textContent;
            txtThirdValue = scanThirdValue.textContent;
            txtFourthValue = scanFourthValue.textContent;
            var stringToDate = new Date(txtFirstValue);
            var testSelectBox = dropdownBodypartsDeep.value;
            var testvaluebiddon = "Scan Type Specialize : Dorsum";

            if (input.value == ""){
                if(

                ((txtThirdValue == "Scan Type : " + dropdownBodyparts.value)
                &&
                (txtFourthValue == "Scan Type Specialize : " + dropdownBodypartsDeep.value))

                |

                ((txtThirdValue == "Scan Type : " + dropdownBodyparts.value)
                &&
                (txtFourthValue == "Scan Type Specialize : "))

                ) 
                {
                    li[i].style.display = "";
                    counter = counter +1;
                }
                else if (dropdownBodyparts.value == "All"){
                    li[i].style.display = "";
                    counter = counter +1;
                }
                else if  (
                    (txtThirdValue == "Scan Type : " + dropdownBodyparts.value)

                    &&

                    (dropdownBodypartsDeep.value == "All")){
                        li[i].style.display = "";
                        counter = counter +1;
                    }

                else {
                    li[i].style.display = "none";
                }
            }

            else if(input.value != ""&& dropdownBodyparts.value == "null") {
                if(
                (stringToDate.getTime() >= (new Date(input.value)).getTime() && stringToDate.getTime() <= (new Date(input2.value)).getTime()) 
                ) 
                {
                    li[i].style.display = "";
                    counter = counter +1;
                }
                else {
                    li[i].style.display = "none";
                }
            }

            else if(input.value != ""&& dropdownBodyparts.value != "null") {
                if(
                (stringToDate.getTime() >= (new Date(input.value)).getTime() && stringToDate.getTime() <= (new Date(input2.value)).getTime()) 
                &&
                ((txtThirdValue == "Scan Type : " + dropdownBodyparts.value)
                &&
                (txtFourthValue == "Scan Type Specialize : " + dropdownBodypartsDeep.value))

                |

                ((txtThirdValue == "Scan Type : " + dropdownBodyparts.value)
                &&
                (txtFourthValue == "Scan Type Specialize : "))
                ) 
                {
                    li[i].style.display = "";
                    counter = counter +1;
                }
                else if (dropdownBodyparts.value == "All"&&
                        (stringToDate.getTime() >= (new Date(input.value)).getTime() && stringToDate.getTime() <= (new Date(input2.value)).getTime()))
                {
                    li[i].style.display = "";
                    counter = counter +1;
                }
                else {
                    li[i].style.display = "none";
                }
            }

        }
        document.getElementById('counterLabel').innerHTML = counter;
    }

</script>

And here is the HTML for the web page :

<body>

<h1 id="titleLabel">TechMed3D Scan DataBase</h1>

<div id="imageTechMed">
    <img src="css/3dsizeme2019.png" class="topRight" style="width:250px;height:45px;">
</div>

<div class="content">

    <div class="container">
        <label id="labelDate">Date de départ : </label>
        <input type="text" id="myInput" name="a" onkeyup="myFunction()" placeholder="yyyy-mm-dd">
        <form>
            <select name = "dropdown" id="dropdownBodyparts" onchange="if (this.selectedIndex) myFunction();">
               <option disabled selected value = "null"> -- Select A Bodypart --</option>
               <option value = "All">All</option>
               <option value = "Head">Head</option>
               <option value = "Foot">Foot</option>
               <option value = "Leg">Leg</option>
               <option value = "Elbow">Elbow</option>
               <option value = "Torso">Torso</option>
            </select>
         </form>
    </div>
    <div class="container">
        <label id="labelDate">Date de fin : </label>
        <input type="text" id="myInput2" name="b" onkeyup="myFunction()" placeholder="yyyy-mm-dd">
        <form>
            <select name = "dropdown" id="dropdownBodypartsDeep" onchange="if (this.selectedIndex) myFunction();">
               <option value = "Specialized" selected>Specialized</option>
            </select>
         </form>
            <div id="scanNumberRight">
                <label id="counterAnouncerLabel">Nombre de scan dans la liste : </label>
                <label id="counterLabel">-</label>
            </div>
    </div>

    <div style="text-align:center;">
        <input type="button" id="first" onclick="firstPage()" value="first" />
        <input type="button" id="next" onclick="nextPage()" value="next" />
        <input type="button" id="previous" onclick="previousPage()" value="previous" />
        <input type="button" id="last" onclick="lastPage()" value="last" />
    </div>

    <ul id="Scan-list"></ul>

</div>

For the selectBox, i use this javascript code to render the good value :

//Set the second selectBox depending on the first one choice.
$(document).ready(function () {
    $("#dropdownBodyparts").change(function () {
        var val = $(this).val();
        if (val == "All") {
            $("#dropdownBodypartsDeep").html("<option value='All'>All</option>");
        } else if (val == "Head") {
            $("#dropdownBodypartsDeep").html("<option value='Specialized'>Specialized</option>");
        } else if (val == "Foot") {
            $("#dropdownBodypartsDeep").html("<option disabled selected value> -- Select A Specialized Bodypart</option><option value='All'>All</option><option value='Dorsum + Imprint'>Dorsum + Imprint</option><option value='Plantar Surface'>Plantar Surface</option><option value='Foam Box'>Foam Box</option><option value='Dorsum'>Dorsum</option><option value='for AFO'>for AFO</option>");
        } else if (val == "Leg") {
            $("#dropdownBodypartsDeep").html("<option disabled selected value> -- Select A Specialized Bodypart</option><option value='All'>All</option><option value='Knee'>Knee</option><option value='AK'>AK</option><option value='BK'>BK</option>");
        } else if (val == "Elbow") {
            $("#dropdownBodypartsDeep").html("<option value='Specialized'>Specialized</option>");
        } else if (val == "Torso") {
            $("#dropdownBodypartsDeep").html("<option disabled selected value> -- Select A Specialized Bodypart</option><option value='All'>All</option><option value='Normal'>Normal</option><option value='Two-sided'>Two-sided</option><option value='Mirror'>Mirror</option><option value='Seating'>Seating</option>");
        }
    });
});

And here is the UI