Александр

Добавьте внутрь окна ещё один блок, <div class="modal-content">, например.

И кидайте подгружаемый контент в него.

Точно так же, как и без jquery.

в Storage сохраняются введенные значения, а в инпут - нет

Ну так наверное надо значение из localStorage доставать и засовывать в input при загрузке страницы:

$('#text')
  .val(localStorage.getItem('key') || '')
  .on('input', e => localStorage.setItem('key', e.target.value));

замените append на text

а ещё замените i * 4000 на (i * 2 + 1) * 1000 - чтобы таймауты не совпадали

<style>
    .tabs-content:not(:first-child) {
    display: none;
}
</style>

<div class="tabs">
    <div class="tabs-button-container">
        <button type="button" class="tabs-button" data-id="1">Параграф 1</button>
        <button type="button" class="tabs-button" data-id="2">Параграф 2</button>
        <button type="button" class="tabs-button" data-id="3">Картинка</button>
    </div>
    <div class="tabs-content-container">
        <div class="tabs-content" data-id="1">
            1. Lorem ipsum dolor sit amet.
        </div>
        <div class="tabs-content" data-id="2">
            2. Lorem ipsum dolor sit amet.
        </div>
        <div class="tabs-content" data-id="3">
            <img src="https://avatars.mds.yandex.net/get-pdb/1220848/0b4c6812-c360-49c3-9266-d0fa010e493f/s1200" width="350">
        </div>
    </div>
</div>

<script>
    (function ($) {
        'use strict';

        $('.tabs-button').on('click touch', function (event) {
            event.preventDefault();
            var id = $(this).data('id');
            $('.tabs-content').hide();
            $('.tabs-content[data-id="' + id + '"]').fadeIn();
        });

    }(jQuery));
</script>

$("#box1:checked, #box2:checked").val()

Метод val может вернуть только одно значение. Так что давайте-ка получим все и просуммируем их:

$('#logistic input:checked').get().reduce((acc, n) => acc + +n.value, 0)

jsfiddle.net/b8ds2c0g/8

gijsroge.github.io/tilt.js

Как то так