"Плывет" стиль элемента при его обновлении через jQuery

Делаю сайт на Django + jQuery + AJAX.Мне необходимо обновить информацию внутри элемента HTML страницы. Пробовал через location.reload(), не нравится, что очищается консоль и удаляется лог, который я планирую хранить. Может есть какие-то способы, подгрузить css напрямую в jQuery, либо как-то грамотно обновить элемент, чтобы не "плыли" стили. Cкрипт jQuery:

`$.ajax({
            url: url,
            type: 'POST',
            data: data,
            cache: false,
            dataType:"json",
            success:function(data2) {
                console.log("OK2");
                console.log(data2.action);
                console.log(data2.message);
                console.log(data2.history);
                $('#info').load(document.URL +  ' #info');
                $('#turn').load(document.URL + ' #turn');
                // location.reload(true);
                $('#log').html('<h4>' + data2.history+' </h4>');
                if (data2.message.length > 0){
                    window.alert(data2.message)
                    if (data2.message === 'game_ended') {
                        console.log(data2.win_witcher)
                        if (data2.win_witcher === 'witcher_wins') {
                            window.location.href = "/endgame?win=0"
                        }
                        else {
                            window.location.href = "/endgame?win=1"
                        }
                        console.log("check22")
                    }
                }

            },
            error: function () {
                console.log("error")
                console.log("message")
            }

        })
    };`

HTML код обновляемых элементов:

    <div class="card-deck mb-3 text-center" id="info">
        <div class="card mb-4 shadow-sm" id="witcher">
          <div class="card-header">
            <h4 class="my-0 font-weight-normal" id="name">{{witcher.name}}</h4>
          </div>
          <div class="card-body">
            <h1 class="card-title pricing-card-title">{{witcher.level}} <small class="text-muted">уровень</small></h1>
            <ul class="list-unstyled mt-3 mb-4">
              <li>{{witcher.hp}}<small class="text-muted" id="witcher_hp"> здоровья </small></li>
              <li>{{witcher.attack_power}} <small class="text-muted"> сила атаки </small> </li>
              <li>{{witcher.accuracy}}<small class="text-muted"> точность </small></li>
              <li>{{witcher.energy}}<small class="text-muted"> энергия </small></li>
              <li>{{witcher.shield}}<small class="text-muted"> текущий щит </small></li>
              <li>{{witcher.swallow}}<small class="text-muted"> Ласточка </small></li>
                <li>{{witcher.thunder}}<small class="text-muted"> Гром </small></li>
                <li>{{witcher.tawny_owl}}<small class="text-muted"> Неясыть </small></li>
            </ul>
          </div>
        </div>
        {% for el in enemy %}
            {% if el.hp > 0 %}
                <div class="card mb-4 shadow-sm" id="enemy">
                <div class="card-header">
                    <h4 class="my-0 font-weight-normal">{{el.name}}</h4>
                </div>
                <div class="card-body">
                    <h1 class="card-title pricing-card-title">{{el.level}} <small class="text-muted">уровень</small></h1>
                    <ul class="list-unstyled mt-3 mb-4">
                        <li>{{el.hp}}<small class="text-muted"> здоровья </small></li>
                        <li>{{el.attack_power}} <small class="text-muted"> сила атаки </small> </li>
                        <li>{{el.accuracy}}<small class="text-muted"> точность </small></li>
                    </ul>
                </div>
                </div>
            {% endif %}
        {% endfor %}

  </div>

должно быть:

вот что получается в результате обновления


Ответы (0 шт):