JavaScript

Hello,

I'm trying to calculate values every time when change it.

<pre lang="HTML"><pre><ol class="firstDigit"> 
    <li data-value="10"> 10 </li>

<pre><ol class="secondDigit"> 
    <li data-value="10"> 10 </li>

<pre><ol class="firstDigit"> 
    <li data-value="20"> 20 </li> 

const firstNav = $('#firsNav');
const firstSelection = $('.firstDigit'); 
const firstValue = firstSelection.find('li');  
const secondNav = $('#secondNav'); 
const secondSelection = $('.secondDigit'); 
const secondValue = secondSelection.find('li') 
var sum = 0; 
firstNav.click(function(event) {   
    if (firstNav.hasClass('active')) {     
        firstNav.removeClass('active');     
        selection.stop().slideUp(200);   
    } else {     
            firstNav.addClass('active');     
            selection.stop().slideDown(200);
    }   
        event.preventDefault(); 
});  
secondNav.click(function(event) {   
    if (secondNav.hasClass('active')) {     
        secondNav.removeClass('active');     
        secondSelection.stop().slideUp(200);   
    } else {     
        secondNav.addClass('active');     
        secondSelection.stop().slideDown(200);   
    }   
    event.preventDefault(); 
});  
firstValue.click(function() {   
    firstValue.removeClass('active');   
    $(this).addClass('active');   
    var x = $(this).attr('data-value');   
    sum = parseInt(x);   
    document.getElementById('total').innerHTML = sum; });  
    firstValue.click(function() {   
    firstValue.removeClass('active');   
    $(this).addClass('active');   
    var z = $(this).attr('data-value');   
    sum = parseInt(z);   
    document.getElementById('total').innerHTML = sum; 
})  
document.getElementById('total').innerHTML = sum;

<pre><h2 id="firsNav">Choose</h2> 
<ol class="firstDigit"> 
    <li data-value="10"> 10 </li>
    <li data-value="20"> 20 </li>
</ol>
<h2 id="secondNav">Choose</h2>
<ol class="secondDigit"> 
    <li data-value="10"> 10 </li> 
    <li data-value="20"> 20 </li> 
</ol> 
<a id="total" style="font-size: large;font-weight: bold;color: #0a0a0a"></a>

const loadLocalXMLCookie = function(){
  // This isnt working, I get a CORS Violation
  let url = "jsondata.php";
  var xhttp = new XMLHttpRequest();
  // Third Argument of "true" allows XLMHttpRequest2 which allows sending Cookies via AJAX
  xhttp.open("GET", url, true);
  // withCredentials should send Cookies via the request, and should not be needed on SameSite
  xhttp.withCredentials = true;       
  xhttp.onreadystatechange = function() {
    console.log(this);
    if (this.readyState == 4 && this.status == 200){
      outputElement.innerHTML = this.responseText;
    } 
  };
  xhttp.onerror = function(){ outputElement.innerHTML = "XML Cookie Error " + url; };
  xhttp.send();       
}

<pre><script type="text/javascript" ></script>
    <script type="text/javascript">
        function sum() {
	var result= 0;
        var txtFirstNo = document.getElementById('Text1').value;
        var txtSecondNo = document.getElementById('Text6').value;
			
	    if (!isNaN(txtFirstNo)){ 
		result = parseInt(txtFirstNo);
		document.getElementById('Tar').value = parseInt(result);
            }
            
            if (!isNaN(txtSecondNo)){ 
		result = parseInt(txtFirstNo) + parseInt(txtSecondNo);
		document.getElementById('Tar').value = result;
            }
            
           if (!isNaN(result)) {
                document.getElementById('Tar').value = result;
            }
	    
        }
    </script>

Dear Concern, 
I am a new learner of javascript. Please expert will suggest to me, which is a good beginning project for understanding.

if ((m.PaymentPlan.ViolationsUniquePenaltyApplied != null) && (m.PaymentPlan.ViolationsUniquePenaltyApplied != 'undefined'))
                    for (let i = 0; i < m.PaymentPlan.ViolationsUniquePenaltyApplied.length; i++) {
                        let t = '#' + 'td0' + i;
                        let a = parseFloat($(t).html());
                        let b = Number($(t).html());
                        console.log('a');
                        console.log(a);
                        console.log(b);
                        totalRemaining = parseFloat(totalRemaining) - a;
                        console.log('totalRemaining');
                        console.log(totalRemaining);
                    }