مشکل در جاوا اسکریپت هنگام استفاده از innerHtml

من یک فانکشن نوشتم در صورت افزودن محصول به سبد خرید مقدار سبد خرید تغییر کنه و توسط innerHTML کد های خودمو تزریق میکنم به دیو مورد نظر خودم ولی مشکل اینجاست بعد تغییر کردم فانکش اون کد هارو نمیشناسه :

   (function (){
        const classname = document.querySelectorAll('.product-box_action');
  Array.from(classname).forEach(function (element) {
                const classnam = element.querySelector('.add-to-cart');
                const input = element.querySelector("input");
                const classup = element.querySelector('.bootstrap-touchspin-up');
                const classdown = element.querySelector('.bootstrap-touchspin-down');

                if(classnam != null)
                {
                    classnam.addEventListener('click' , function () {
                        const id = classnam.getAttribute('data-productid');
                        axios.post(`/cart/add`, {
                            quantity: this.value,
                            id : `${id}`,
                        })

                            .then(function (response) {

                                var data = " <div class='input-group bootstrap-touchspin bootstrap-touchspin-injected'>\n" +

                                    " <span class='input-group-btn input-group-prepend'>\n" +
                                    " <button class='btn btn-primary bootstrap-touchspin-down' type='button'>-</button>\n" +
                                    " </span>\n" +
                                    " <input type='text' readonly='readonly' value='۱' class='numberpicker form-control' data-max='۴' data-stop='۰' data-productid="+`${id}`+" data-storeid='۱۹۶۲' data-supplier='false'>\n" +
                                    " <span class='input-group-btn input-group-append'>\n" +
                                    " <button class='btn btn-primary bootstrap-touchspin-up' type='button'>+</button>\n" +
                                    " </span>\n" +
                                    " </div>";
                                element.innerHTML = data;
                                console.log(response.data);
                                document.querySelector('.topCartCount').innerHTML = response.data;
                                Toast.fire({
                                    icon: 'success',
                                    title: 'محصول با موفقیت به سبد خرید اضافه شد'
                                })
                                // location.reload();

                            })
                            .catch(function (error) {
                                Toast.fire({
                                    icon: 'warning',
                                    title: 'متاسفانه محصول به سبد خرید اضافه نشد'
                                })
                            })

                    })

تمام کد قرار ندادم مقداری از اون قرار دادم تا اونجایی که مشکل دارم