$documentonclick qq_search_product_input function $qq_ajax_search_productaddClassqq_search_on; $scrollContaineraddClassqhovered;;i want to remove class if click outside of this class

You can achieve this by adding an event listener to the document and checking if the clicked element is not the ".qq_search_product_input" or any of its children. If so, you can remove the class from ".qq_ajax_search_product" and ".scrollContainer".

Here's an example of how you can modify the code to achieve this:

$(document).on('click', '.qq_search_product_input', function() {
    $('.qq_ajax_search_product').addClass('qq_search_on');
    $('.scrollContainer').addClass('qhovered');
});

$(document).on('click', function(event) {
    // Check if the clicked element is not ".qq_search_product_input" or its children
    if (!$(event.target).closest('.qq_search_product_input').length) {
        $('.qq_ajax_search_product').removeClass('qq_search_on');
        $('.scrollContainer').removeClass('qhovered');
    }
});

This code adds a click event listener to the document and checks if the clicked element or any of its ancestors have the ".qq_search_product_input" class. If not, it removes the classes from ".qq_ajax_search_product" and ".scrollContainer"