Javascript functions do not work after updating content (Using Document Ready atm.)

Question

I have a question I am working with a form based shopping cart add function and a livesearch (PHP) function where it requests new data with the same classes. I have seen multiple examples besides (document.ready) but none of them seemed to work correctly after the DOM Content has been modified by the PHP livesearch function. (The current method is on the document ready function as you guys can see.

Thanks in advance!

// Icon Click Focus
$('.product').on('click', function() {
    var strId = '';
    var strId = $(this).attr('class');
    var strId2 = strId.replace(' product','');
    var strId3 = strId2.replace('product-','');
    var formData = "product"+strId3;
    
    document.getElementById("product_toevoeg_id").value = strId3;
    
    var productNaam = $("#"+formData+" .f-productnaam").val();
    document.getElementById("productnaam").innerHTML = productNaam;
    document.getElementById("product_naam_form").value = productNaam;
    
    var productIngredienten = $("#"+formData+" .f-ingredienten").val();
    document.getElementById("ingredienten").innerHTML = productIngredienten;
    document.getElementById("ingredienten_form").value = productIngredienten;