Контекст обновления Django ajax

я хочу обновить контекст моего шаблона "threedobject" мой файл представления

def threedProductCategory(request):
    id = request.GET['id']
    todos = mProduct.objects.filter(category_id_id=id).values()
    return JsonResponse({"threedobject" : list(todos)})

мой аякс

function refresh(i){
    $.ajax({
        type:"GET",
        url: 'cpd/',
        data:{"id": i},
        success: function (result) {
            threedobject = result;

            $.each(result.threedobject, function(item){
                $(".carousel-indicators").append(item);
            });
        }
    });
}

я хочу обновить мой html контекст threedobject мой html:

                        {% for item in  threedobject%}
                            {% if foorloop.index == 0 %}
                                <li data-target='#carousel-custom1' data-slide-to='0' class='active '>
                                    <img src='{{item.image_url.0}}' alt='' />
                                    <p class="product-name">{{ item.name.0 }}</p>
                                    <p class="producer-name">{{ item.user_id.0 }}</p>

                                    <div class="rating">
                                        <span class="fa fa-star checked"></span>
                                        <span class="fa fa-star checked"></span>
                                        <span class="fa fa-star checked"></span>
                                        <span class="fa fa-star"></span>
                                        <span class="fa fa-star"></span>

                                    </div>
                                </li>
                            {% endif %}
                            <li id="categoryItem"
                                onclick="
                                        document.getElementById('threedSelecteImg').src = '{{ item.image_url }}';
                                        document.getElementById('threedSelecteName').innerHTML ='{{ item.name }}';
                                        document.getElementById('threedSelecteProducer').innerHTML='{{ item.user_id.name }}';
                                        document.getElementById('threedSelecteDescription').innerHTML='{{ item.description }}';
                                        "
                                data-target='#carousel-custom1' data-slide-to='1' >
                                <img class="threedObjectsImg" src='{{item.image_url}}' alt='' />
                                <p id="threedObjectsName" class="product-name">{{ item.name }}</p>
                                <p id="threedObjectsProducer" class="producer-name">{{ item.user_id.name }}</p>
                                <div class="rating">
                                    <span class="fa fa-star checked"></span>
                                    <span class="fa fa-star checked"></span>
                                    <span class="fa fa-star checked"></span>
                                    <span class="fa fa-star"></span>
                                    <span class="fa fa-star"></span>

                                </div>
                            </li>
                        {% endfor %}

этот ajax ничего не меняет, но этот меняет первое изображение:

function refresh(i){
    $.ajax({
        type:"GET",
        url: 'cpd/',
        data:{"id": i},
        success: function (result) {
            threedobject = result;
            for (var m = 0; m< result.threedobject.length; m++){
                $('#threedObjectsImg').attr("src",result.threedobject[m]["image_url"]);

            }


        }
    });
}

я хочу обновить контекст, чтобы изменить мой шаблон после нажатия некоторой кнопки. На этом сайте у меня есть категория, чтобы поднять модель по категории, каждая кнопка загружает некоторую модель для просмотра

//as an instance:

function refresh(i){
    $.ajax({
        type:"GET",
        url: 'cpd/',
        data:{"id": i},
        success: function (result) {
            threedobject = result;

            $.each(result.threedobject, function(item){
                $("#carousel-indicators-id").append(item);
            });
        }
    });
}