jQuery Ajax Checkbox Remembered

How to remember checkbox using cookies when I use jQuery Ajax load to get the data.

Example,

<div class="country">
    <?php
    $countryQuery = mysqli_query($con, "SELECT * FROM tb_country ORDER BY country_name ASC");
    while($countryFetchData = mysqli_fetch_array($countryQuery))
    {
    ?>
        <li class="selectCountry" id="<?php echo $countryFetchData['country_id']; ?>">
            <img class="thumb" src="assets/img/country/<?php echo $countryFetchData['country_image']; ?>"/>

            <div style="text-align: center; position: absolute; margin-top: 60px; width: 64px;"><?php echo $countryFetchData['country_name']; ?></div>
        </li>
    <?php
    }
    ?>
</div>

This is the jQuery Ajax get team:

$('.selectCountry').click(function()
{
    var id = $(this).attr("id");

    var dataString = 'id='+id;

    $('.firstTeamList').html("<img src='assets/img/loading.gif'/>");

    $.ajax(
    {
        type: "POST",
        url: "getTeamList.php",
        data: dataString,
        cache: false,
        success: function(data)
        {
            $('.firstTeamList').show();
            $('.firstTeamList').html(data);
        }
    });
});

getTeam.php

<div class="teamList">
    <?php
    $clubsQuery = mysqli_query($con, "SELECT * FROM tb_clubs WHERE country_id_fk = '$getCountryID'");
    while($clubsFetchData = mysqli_fetch_array($clubsQuery))
    {
        <li class="teamList">
            <input type="checkbox" name="club[]" class="checkbox" id="cl<?php echo $clubsFetchData['club_id']; ?>"/>

            <label for="cl<?php echo $clubsFetchData['club_id']; ?>"><img src="assets/img/clubs/<?php echo $clubsFetchData['club_image']; ?>"/>

                <div>
                    <?php echo $clubsFetchData['club_name']; ?>
                </div>
            </label>
        </li>
    }
    ?>

<script>
  $(".checkbox").on("change", function(){
    var checkboxValues = {};
    $(".checkbox").each(function(){

      checkboxValues[this.id] = this.checked;

    });
    $.cookie('checkboxValues', checkboxValues, { expires: 7, path: '/' })
  });

  function repopulateCheckboxes(){
    var checkboxValues = $.cookie('checkboxValues');
    if(checkboxValues){
      Object.keys(checkboxValues).forEach(function(element) {
        var checked = checkboxValues[element];
        $("#" + element).prop('checked', checked);
      });
    }
  }

  $.cookie.json = true;
  repopulateCheckboxes();
</script>

I have tried with that code and the checkbox checked only working for first click in each country. Example if I click England(sample data) it will show the club in England. MU, Arsenal, Manchester City.

When I click MU and Arsenal the checkbox will be remembered. But when I click another country example Spain and I click Real Madrid, Barcelona the previous checkbox(in England team) not checked.

Anyone can help?