Calculate values from two input forms with jQuery

I'm trying to add the scores from Level 1 and Level 2 and display the result in the <div id="score"></div>.

This is so far what I've made but it not only doesn't work for all the inputs but also seems like a mess that I think is not the right way to solve what I'm trying to achieve. I've repeated the almost same thing, again and again, there should be a simpler and poetic way of writing.

I'd very much appreciate the suggestions how could I write it better?

$(document).ready(function() {
    $(document).on("input", function() {
        FScore = 0;
        if (document.getElementById("1").checked) {
            Score = FScore + 1;
        }
        if (document.getElementById("2").checked) {
            Score = FScore + 2;
        }
        if (document.getElementById("3").checked) {
            Score = FScore + 3;
        }
        if (document.getElementById("4").checked) {
            Score = FScore + 4;
        }
        if (document.getElementById("5").checked) {
            Score = FScore + 5;
        }
        if (document.getElementById("6").checked) {
            Score = FScore + 6;
        }
        if (document.getElementById("7").checked) {
            Score = FScore + 7;
        }
        if (document.getElementById("8").checked) {
            Score = FScore + 8;
        }
        $('#score').html(Score);
    })
    $("#1").trigger("input");
});

form { 
    position: relative; 
    top: 100px; 
    left: 100px; 
    background: -webkit-linear-gradient(bottom,#eaeaea, #fafafa);
    padding: 10px;
    display: inline-block;
    box-shadow: 0 1px 1px rgba(0,0,0,.65);
    border-radius: 3px;
    border: solid 1px #ddd;
}
input { display: none; }
input:checked + label { 
    background: -webkit-linear-gradient(top,#4D90FE,#4787ED);
    border: solid 1px rgba(0,0,0,.15);
    color: white; 
    box-shadow: 0 1px 1px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.1) inset;
    text-shadow: 0 -1px 0 rgba(0,0,0,.6);
}
label { 
    font-family: helvetica;
    cursor: pointer; 
    display: inline-block; 
    border: solid 1px transparent;
    margin-right: 2px; 
    width: 50px; 
    height: 40px; 
    text-align: center; 
    line-height: 40px;
    border-radius: 3px; 
}
label:last-child { margin-right: 0; }
label:hover {     
    background: rgba(77, 144, 254, .5); 
    border: solid 1px rgba(0,0,0,.15); 
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <form>
      Level One:<br>
      <input type="radio" name="first" id="1" value="1" checked="checked" /> 
      <label for="1">1</label>
      <input type="radio" name="first" id="2" value="2" />     
      <label for="2">2</label>
      <input type="radio" name="first" id="3" value="3" />     
      <label for="3">3</label>
      <input type="radio" name="first" id="4" value="4" />     
      <label for="4">4</label>
   </form>
   <form>
      Level Two:<br>
      <input type="radio" name="second" id="5" value="5" checked="checked" /> 
      <label for="small">5</label>
      <input type="radio" name="second" id="6" value="6" />     
      <label for="6">6</label>
      <input type="radio" name="second" id="7" value="7" />     
      <label for="7">7</label>
      <input type="radio" name="second" id="8" value="8" />     
      <label for="8">8</label>
   </form>
</div>
<div class="container">
   <label>Result:</label>
   <div id="score"></div>
</div>

Solution

The easier way to do this would be as follows:

$(document).ready(function() {
    $("input").change(function() {
        $('#score').html( +$('input[name="first"]:checked').val() + +$('input[name="second"]:checked').val() );
    })
    $("#1").trigger("change");
});

form { 
    position: relative; 
    top: 100px; 
    left: 100px; 
    background: -webkit-linear-gradient(bottom,#eaeaea, #fafafa);
    padding: 10px;
    display: inline-block;
    box-shadow: 0 1px 1px rgba(0,0,0,.65);
    border-radius: 3px;
    border: solid 1px #ddd;
}
input { display: none; }
input:checked + label { 
    background: -webkit-linear-gradient(top,#4D90FE,#4787ED);
    border: solid 1px rgba(0,0,0,.15);
    color: white; 
    box-shadow: 0 1px 1px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.1) inset;
    text-shadow: 0 -1px 0 rgba(0,0,0,.6);
}
label { 
    font-family: helvetica;
    cursor: pointer; 
    display: inline-block; 
    border: solid 1px transparent;
    margin-right: 2px; 
    width: 50px; 
    height: 40px; 
    text-align: center; 
    line-height: 40px;
    border-radius: 3px; 
}
label:last-child { margin-right: 0; }
label:hover {     
    background: rgba(77, 144, 254, .5); 
    border: solid 1px rgba(0,0,0,.15); 
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <form>
      Level One:<br>
      <input type="radio" name="first" id="1" value="1" checked="checked" /> 
      <label for="1">1</label>
      <input type="radio" name="first" id="2" value="2" />     
      <label for="2">2</label>
      <input type="radio" name="first" id="3" value="3" />     
      <label for="3">3</label>
      <input type="radio" name="first" id="4" value="4" />     
      <label for="4">4</label>
   </form>
   <form>
      Level Two:<br>
      <input type="radio" name="second" id="5" value="5" checked="checked" /> 
      <label for="5">5</label>
      <input type="radio" name="second" id="6" value="6" />     
      <label for="6">6</label>
      <input type="radio" name="second" id="7" value="7" />     
      <label for="7">7</label>
      <input type="radio" name="second" id="8" value="8" />     
      <label for="8">8</label>
   </form>
</div>
<div class="container">
   <label>Result:</label>
   <div id="score"></div>
</div>

Note the syntax +$('input[name="first"]:checked') coerces the string value of the checked input to a number. You could also have used the parseInt() function.