Why my list isn't sorting by Score value?

Question

I'm trying to sort my list by Score value (in DESC order). However, my following code for sorting doesn't work:

tbClients.sort(function (a,b){
         if (a.Score < b.Score)
            return 1;
         if (a.Score> b.Score)
            return -1;
         return 0;
   });

Note: to get a list item with score more than 0 press Edit field, then above press "Evaluate" and then refresh the page. You will get Score 10 for that field. In this way I want to make sure all field with value of 10 are listed above fields with values of 0.

Here is my full code:

$( document ).ready(function() {
  // localStorage.removeItem("tbClients");
  var operation = "A"; //"A"=Adding; "E"=Editing

    var selected_index = -1; //Index of the selected list item

    var tbClients = localStorage.getItem("tbClients");//Retrieve the stored data

    tbClients = JSON.parse(tbClients); //Converts string to object

    if(tbClients == null) //If there is no data, initialize an empty array
        tbClients = [];

var lastID = 0;

    function Add(){





        var client = JSON.stringify({
            Score    : 0,
      // $("#txtID").val(),
            Title  : $("#project_title").val()

        });
        tbClients.push(client);

        localStorage.setItem("tbClients", JSON.stringify(tbClients));



    List();
        // alert("The data was saved.");
    // alert(lastID);
        return true;
    }



    function Delete(){
        tbClients.splice(selected_index, 1);
        localStorage.setItem("tbClients", JSON.stringify(tbClients));
        //alert("Client deleted.");
    }



  function List(){
        $("#tblList").html("");
        $("#tblList").html(
            "<thead>"+
            "   <tr>"+
            "   <th></th>"+
            "   <th>Score</th>"+
            "   <th>Name</th>"+
            "   <th>Phone</th>"+
            "   <th>Email</th>"+
            "   </tr>"+
            "</thead>"+
            "<tbody>"+
            "</tbody>"
            );




        for(var i in tbClients){
            var cli = JSON.parse(tbClients[i]);

            $("#tblList tbody").append("<tr>"+
                                       "    <td><img src='http://passcloud.me/img/edit.png' alt='Edit"+i+"' class='btnEdit'/><img src='http://passcloud.me/img/delete.png' alt='Delete"+i+"' class='btnDelete'/></td>" +
                                         "  <td>"+cli.Score+"</td>" +
                                         "  <td>"+cli.Title+"</td>" +
                                         "</tr>");


        }

    tbClients.sort(function (a,b){
         if (a.Score < b.Score)
            return 1;
         if (a.Score> b.Score)
            return -1;
         return 0;
   });


    }

    $("#btnSave").bind("click",function(){
        Add();
    });

  function Edit(){
        tbClients[selected_index] = JSON.stringify({
                ID    : $("#txtID").val(),
                Name  : $("#txtName").val(),
                Phone : $("#txtPhone").val(),
                Email : $("#txtEmail").val()
            });//Alter the selected item on the table
        localStorage.setItem("tbClients", JSON.stringify(tbClients));
        //alert("The data was edited.")

        return true;
    }


  $("#evaluate_now").bind("click",function(){

    Evaluate();

  });


  function Evaluate() {



    tbClients[selected_index] = JSON.stringify({
        Score    : 10,
        Title  : $("#project_title").val(),
      });//Alter the selected item on the table
    localStorage.setItem("tbClients", JSON.stringify(tbClients));
    //alert("The data was edited.")

    return true;







    List();
        // alert("The data was saved.");
    // alert(lastID);
        return true;
  }

    List();



    $(".btnEdit").bind("click", function(){

    $("#evaluate_now").show();
        operation = "E";
        selected_index = parseInt($(this).attr("alt").replace("Edit", ""));

        var cli = JSON.parse(tbClients[selected_index]);
        $("#evaluation_score").val(cli.Score);
        $("#project_title").val(cli.Title);

        $("#evaluation_score").attr("readonly","readonly");
        $("#project_title").focus();
    });

    $(".btnDelete").bind("click", function(){
        selected_index = parseInt($(this).attr("alt").replace("Delete", ""));
        Delete();
        List();
    });
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title></title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/jumbotron/">



    <!-- Bootstrap core CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.1/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.1/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>


  </head>
  <body>

<main>
  <div class="container py-4">
    <header class="pb-3 mb-4 border-bottom">
      <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
        <span class="fs-4">Jumbotron example</span>
      </a>
    </header>

    <form id="frmCadastre">
        <ul>
            <li>
                <label for="evaluation_score">Score:</label>
                <input type="text" id="evaluation_score"/> <a href="#" id="evaluate_now" style="display:none;">Evaluate</a>
            </li>
            <li>
                <label for="project_title">Project:</label>
                <input type="text" id="project_title"/>
            </li>
            <li>
                <label for="txtPhone">Phone:</label>
                <input type="text" id="txtPhone"/>
            </li>
            <li>
                <label for="txtEmail">Email:</label>
                <input type="text" id="txtEmail"/>
            </li>
            <li>
        <a href="#" id="btnSave">Save</a>

                <input type="reset" value="Clear"/>
            </li>
        </ul>
    </form>

    <table id="tblList">

    </table>


    <footer class="pt-3 mt-4 text-muted border-top">
      &copy; 2021
    </footer>
  </div>
</main>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="index.js">

</script>

  </body>
</html>