Simple map

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="map">
  <div class="town"></div>
  <div class="town"></div>
  <div class="town"></div>
  <div class="town"></div>
  <div class="town"></div>
  <div class="town"></div>
</div>

<p>Всего стран: <span class="total"></span></p>
<p>Посетил: <span class="justmy"></span></p>
<p>Осталось посетить: <span class="simplemath"></span></p>

<button class="save__result">save</button>

CSS

.map {
  background: #ddd;
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
  text-align:center;
}
.map.active {
  pointer-events: none;
}
.town {
  padding: 10px;
  background: #222;
  display: inline-block;
  width: 100px;
  height: 100px;
  cursor: pointer;
}
.town:hover,
.town.active {
  background: #666;
}

JavaScript

$(".town").click(function() {
    $(this).toggleClass("active");
});

$(document).ready(function() {

    $('.town').each(function(index) {
        var town = $(this);
        var town_key = 'town_' + index;
        var town_local = localStorage.getItem(town_key);

        if (town_local == 'true') {
            town.addClass('active');

            var total = $('.town').length;
            var justmy = $('.town.active').length;
            var simplemath = total - justmy;
            var activer = $('.town').hasClass('active');

            $(".map").addClass('active');
            $('.total').empty().text(total);
            $('.justmy').empty().text(justmy);
            $('.simplemath').empty().text(simplemath);
            $(".save__result").hide();
        }
    });

});

$(".save__result").click(function(e) {

    var total = $('.town').length;
    var justmy = $('.town.active').length;
    var simplemath = total - justmy;
    var activer = $('.town').hasClass('active');

    $('.town').each(function(index) {
        var town = $(this);
        var town_key = 'town_' + index;
        var town_sign = town.hasClass('active');
        localStorage.setItem(town_key, town_sign);
    });

    if (activer === true) {
        $(".map").addClass('active');
        $('.total').empty().text(total);
        $('.justmy').empty().text(justmy);
        $('.simplemath').empty().text(simplemath);
        $(".save__result").hide();
    } else {
        console.log('error');
    }
});