通过使用jQuery选中复选框对数据进行排序？

Question

我正在从API获取数据，并且希望在选中复选框时按字母顺序对其进行排序。 但是我不确定为此放置代码的位置，老实说我不确定代码应该是什么。 我搜索了互联网，但无法使其适用于我的项目。 请帮忙。 这是我的代码。 在脚本中我已经开始写，但可能不正确

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MusicApp</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>

</head>

<body>
    <header>
    <div class="container">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">MusicApp</a>
                </div>
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="lyrics.html">Lyrics</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                </ul>
            </div>
        </nav>
    </div>
</header>

<div class="container">
    <div class="row" style="margin-top:30px;">

        <div class="col-sm-4">

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Search</h3>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-4">
                                <img class="thumbnail img-responsive" src="images/notes.jpg">
                            </div>
                            <div class="col-sm-8">                            
                                <input type="checkbox" class="form-check-input" id="sort">
                                <label class="form-check-label" for="sort">Sort</label>                              
                            </div>

                        </div>

                        <div class="row">
                            <div class="col-sm-12">
                                <label for="artist">Artist:</label>
                                <input type="text" class="form-control" id="artist">
                            </div>
                        </div>

                    </div>
                </div>
                <div class="panel-footer" style="height:50px;">
                    <button type="button" id="searchBtn" class="btn btn-primary pull-right publish"><span
                            class="glyphicon glyphicon-globe"></span> Search
                    </button>
                </div>
            </div>
        </div>
        <div class="col-sm-8">

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Results</h3>
                </div>

                <ul class="list-group" style="min-height:241px;" id="contentList">

                    <li class="list-group-item" style="display:none" id="cloneMe">
                        <div class="row">
                            <div class="col-sm-2 col-xs-3">
                                <img src="images/notes.jpg" class="thumbnail img-responsive">
                            </div>
                            <div class="col-sm-7 col-xs-6">
                                <h4>Shakira</h4>
                                <p id="songName">some result </p>
                                <p id="lyricsLink">some result</p>
                            </div>
                            <div class="col-sm-3 col-xs-3">
                                <button type="button" class="btn btn-danger pull-right remove-post"><span
                                        class="glyphicon glyphicon-remove"></span><span class="hidden-xs"> Delete</span>
                                </button>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>

        </div>
    </div>


</div>

</div>
</body>

<script>
    $(document).ready(function(){
    var api="1f57380a81msh394cf453f4d1e73p1a0276jsnab0cd43f0df7";

    $('#sort').click(function(){
      if($(this).is(':checked')){

      }

    });

    $('#searchBtn').click(function(){
        artistName=$('#artist').val();
        console.log(artistName);

        var settings = {
        "async": true,
        "crossDomain": true,
        "url": "https://genius.p.rapidapi.com/search?q=" + artistName,
        "method": "GET",
        "headers": {
            "x-rapidapi-host": "genius.p.rapidapi.com",
            "x-rapidapi-key": "1f57380a81msh394cf453f4d1e73p1a0276jsnab0cd43f0df7"
            }
        }


        $.ajax(settings)
        .done(function (response) {

           // console.log(response.response.hits);
          response.response.hits.forEach(r => {
            var miniMe = $('#cloneMe').clone();
                miniMe.attr('id', r.result.id);
            console.log(r.result.header_image_url);
                miniMe.find('img').attr('src', r.result.header_image_url);
                miniMe.find('h4').text(artistName);
                miniMe.find('#songName').html(r.result.full_title);
                miniMe.find('#lyricsLink').html(r.result.url);
                miniMe.find('button').click(function () {
                    miniMe.remove();
                });
                miniMe.find('checkbox').click(function(){

                })
                miniMe.show();
                $('#contentList').append(miniMe);
          });               
        });
        return false;
    });

});

</script>
</html>