Javascript - Storing an array table ascending/descending

Question

I am trying to have a sort function on each column in my table. I have got the name sort function working. But only the ascending function working on the 'title' column. I followed a guide on how to make this, and I am now wanting each column its own unique sort. But I can't seem to figure it out.

Any help?

Thanks everyone.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
    th{ 
        cursor: pointer;
        color:#fff;
            }
</style>


<table class="table table-striped">
    <tr  class="bg-info">
        <th  class="bg-info" data-colname="name" data-order="descname">Name &#9650</th>
        <th  data-coltitle="title" data-order="desctitle">Title &#9650</th>
        <th  data-colgenre="genre">Genre &#9650</th>
        <th  data-colrating="rating">Rating 0-5 &#9650</th>
        <th  data-colcountry="country">Country &#9650</th>
    </tr>
    <tbody id="myTable">
        
    </tbody>
</table>


<script>
var myArray = [
    {'name':'Alexievich, S', 'title':'The Unwomanly Face of War', 'genre': 'Biography', 'rating':'5', "country": "Belarus"},
    {'name':'Alexievich, S', 'title':'Chernobyl Prayer', 'genre': 'Biography', 'rating':'5', "country": "Belarus"},
    {'name':'Barrister, S', 'title':"The Secret Barrister: Stories of the Law and How It's Broken", 'genre': 'Autobiography', 'rating':'5', "country": "United Kingdom"},
    {'name':'Barrister, S', 'title':"Fake Law: The Truth About Justice in an Age of Lies", 'genre': 'Autobiography', 'rating':'4', "country": "United Kingdom"},
    {'name':'Bradbury, R', 'title': 'Farenheit 451', 'genre': 'Dystopian', 'rating':'4', "country": "United States"},
    {'name':'Defoe, D', 'title':"Robinson Cruseo", 'genre': 'Adventure Fiction', 'rating':'3', "country": "United Kingdom"},
    {'name':'Dick, P', 'title':"The Man in The High Castle", 'genre': 'Alternate History', 'rating':'3', "country": "United States"},
    {'name':'Dickens, C', 'title':"A Tale of Two Cities", 'genre': 'Historical Fiction', 'rating':'4', "country": "United Kingdom"},
    {'name':'Doyle, A.C', 'title':"The Hound of Baskervilles", 'genre': 'Mystery', 'rating':'4', "country": "United Kingdom"},
    {'name':'Dronfield, J', 'title':"The Boy Who Followed His Father Into Auschwitz", 'genre': 'Biography', 'rating':'5', "country": "United Kingdom"},
    {'name':'Fitzgerald, F.S', 'title':"The Great Gatsby", 'genre': 'Historical Fiction', 'rating':'4', "country": "United States"},
    {'name':'Gombrich, E', 'title':"A Little History Of The World", 'genre': 'History', 'rating':'5', "country": "Austria"},

]


buildTable(myArray)



$('th').on('click', function(){
     var column = $(this).data('colname')
     var columntitle = $(this).data('coltitle')
     var order = $(this).data('order')
     var ordertitle = $(this).data('ordertitle')
     var text = $(this).html()
     text = text.substring(0, text.length - 1);
     
     
     
    if (order == 'descname'){
        myArray = myArray.sort((a, b) => a[column] > b[column] ? 1 : -1)
        $(this).data("order","ascname");
        text += '&#9660'}

    else if(order == 'desctitle'){
        myArray = myArray.sort((a, b) => a[columntitle] > b[columntitle] ? 1 : -1)
        $(this).data("ordertitle","asctitle");
        text += '&#9660'}

    else if(order == 'desctitle'){
        myArray = myArray.sort((a, b) => a[columntitle] < b[columntitle] ? 1 : -1)
        $(this).data("ordertitle","desctitle");
        text += '&#9660'          

    
    }else{
        myArray = myArray.sort((a, b) => a[column] < b[column] ? 1 : -1)
        $(this).data("order","descname");
        text += '&#9650'
    }

    $(this).html(text)
    buildTable(myArray)
    })


   
 
    
function buildTable(data){
    var table = document.getElementById('myTable')
    table.innerHTML = ''
    for (var i = 0; i < data.length; i++){
        var colname = `name-${i}`
        var coltitle = `title-${i}`
        var colgenre = `genre-${i}`
        var colrating = `rating-${i}`
        var colcountry = `country-${i}`

        var row = `<tr>
                        <td>${data[i].name}</td>
                        <td>${data[i].title}</td>
                        <td>${data[i].genre}</td>
                        <td>${data[i].rating}</td>
                        <td>${data[i].country}</td>
                   </tr>`
        table.innerHTML += row
    }
}

</script>