Добавить данные в представление после успеха ajax без перезагрузки страницы

В модальном режиме есть два поля ввода, вводимые данные отправляются контроллеру, обрабатываются там и затем сохраняются в базе данных.

После успешного сохранения данных модальное окно сбрасывается и скрывается.

Как я могу добавить в представление только что созданные данные (интерес), не перезагружая страницу? И что существуют те же функции, что и у уже существующего элемента?

Я использую Bootstrap во фронтенде и Laravel в бэкэнде

Аякс:

<script type = "text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name = "csrf-token"]').attr('content')
        }
    });

    $("#storeinterest").click(function(e){
        e.preventDefault();
        var itag = $('#create_itag').val();
        var name = $('#create_name').val();

        $.ajax({
            type:'POST',
            url:'{{URL::route('interests.store')}}',
            data:{name:name, itag:itag},
            success:function(data){
                _toastr_new(data.message, "top-full-width", "success", false, '.toastr-notify', 0);
                $('#create_itag').tagsinput('removeAll');
                $('#create_name').val('');
                $('#addInterest').delay(1000).fadeOut(450);

                setTimeout(function(){
                    $('#addInterest').modal("hide");
                }, 1500);
            }
        });
    });
</script>

Ответ от контроллера:

$data = [
                'message' => trans('messages.newinterest'),
                'interest' => $interest
            ];
            return response()->json($data, 200);

Вид:

<div class = "infinite-scroll">
                <div class = "row">
                    @foreach ($interests as $interest)
                        <div class = "col-md-4 col-sm-6 col-xs-12 mtm-10 mtmm-115">
                            <div class = "box-icon box-icon-center box-icon-round box-icon-large text-center">
                                <div class = "front rahmen_iboard box-shadow-7">
                                    <div class = "box1" style = "background-color:#FFFFFF">
                                        <div class = "box-icon-title">
                                            <div class = "z-100">
                                                <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
                                                    <i class = "ico-xs glyphicon glyphicon-option-vertical float-right pt-8"></i>
                                                </a>
                                                <ul class = "dropdown-menu dropdown-left-iboard dropdown-menu-right">
                                                    <li class = "dropdown-item">
                                                        <a class = "p-2" data-toggle = "modal" data-target = "#updateInterest{{$interest->id}}"><i class = "ico-xs glyphicon glyphicon-globe"></i> Bearbeiten</a>
                                                        <a class = "p-2" data-toggle = "modal" data-target = "#delteInterest{{$interest->id}}"><i class = "ico-xs fa fa-remove"></i> Löschen</a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class = "img-ausschnitt">
                                                <a class = "img-hover" href = "{{URL::route('interests.show', $interest->id)}}">
                                                    <img class = "img-fluid" src = "@if ($interest->mostVote) {{ Storage::url($interest->mostVote->postsImages->random()->image_thumbnail) }} @else {{ Storage::url('defaults/posts/nopost_interest.jpg') }}  @endif" alt = "" />
                                                </a>
                                            </div>
                                            <div class = "progress">
                                                <div class = "@if ($interest->ratio < 20) progress-bar-danger @else progress-bar-primary @endif h-7" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width:{{$interest->ratio}}%;">
                                                </div>
                                            </div>
                                            <span class = "mdl-badge" data-badge = "2"><b> {{$interest->name}}</b></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @include("modal.delteInterest")
                        @include("modal.updateInterest")
                    @endforeach
                </div>
                {{$interests->links()}}
            </div>