Better option for displaying dynamic checkboxes on change Jquery

Im having trouble that the way im currently using is not remembering old input values due to .empty();

so any help would be appreciated to achieve changing the checkboxes dynamically but also keep the checkboxes i currently had.

the data im gettings looks like this:

data => array(
  "modules" => array(
     [0] => "books"
     )
     [1] => array(
        "id" => "2",
        "name" => "articles"
     )
     [2] => array(
        "id" => "3",
        "name" => "pages"
     )
  )
  "projects" => array(
     0 => "Harry potter",
     1 => "Lord of the rings",
     2 => "Da vince code"
  )

  );

my jQuery looks like this:

    $(document.body).on('change', ".project-item", function(e) {

        $('.module-container').empty();

        e.stopPropagation();

        var token = $('input[name=_token]').val();

        var items = $("input[name='projects[]']:checked").map(function () {
            return this.value;
        }).get();

        $.ajax({
            type: "POST",
            data: {_token: token, items: items},
            url: '/users/modules-request',
            dataType: 'json',
            success: function (data) {

                $.each(data['projects'], function (index, projectname) {

                    var moduleItems = $("<div class='col-md-3 module-items'></div>").appendTo('.module-container');

                    $(moduleItems).append('<h2>' + projectname + '<h2>');

                    $.each(data['modules'][index], function (index, module) {

                        $(module).each(function(index, item) {
                            $(moduleItems).append('<input type="checkbox" name="modules[]" id="module_id" value="' + item.id + '" >' + " " + item.name + '<br />');
                        });

                    });

                });


            }
        });
    });