Scripts inside SlickSlider not working?

Question

JavaScript

Scripts inside the slider do not work, I can not find the answer for a long time

<div class="assortment__slider">
$query = new WP_Query( array(
    'post_type' => 'post',
) );
while ( $query->have_posts() ) { $query->the_post();
$price = get_field( 'price' );
$style_shingles = get_field( 'style_shingles' );
?>
<article class="style-shingles">
    <div class="style-shingles__title">
        <?php the_title( '<h4>', '</h4>' ); ?>
        <span><?php _e('от ', 'dobrobud'); echo $price; _e(' грн./м2', 'dobrobud'); ?></span>
    </div>

    <div class="style-selection">
        <div class="style-selection__img img<?php the_ID(); ?>"></div>
        <form class="style-selection__color">
            <?php
                $i = 1;
                foreach($style_shingles as $styl) {
                $checked = ($i === 1) ? 'checked' : '';
            ?>
            <label>
                <input class="color-shingles<?php the_ID(); ?>" name="<?php the_ID(); ?>" type="radio" data-img="<?php echo $styl['shingles_img']['url']; ?>" data-color="<?php echo $styl['shingles_color']; ?>" <?php echo $checked; ?> />
                <span><i style="background-color: <?php echo $styl['shingles_color']; ?>"></i></span>
            </label>
            <?php
                $i++;
                }
            ?>
        </form>
    </div>
</article>
</div>

<script>
jQuery(document).ready(function($){
<?php
$query = new WP_Query( array(
    'post_type' => 'post',
) );
while ( $query->have_posts() ) { $query->the_post();
?>
    function attrSrc<?php the_ID(); ?>() {
        var input = $('.color-shingles<?php the_ID(); ?>'),
            inputChec = $('.color-shingles<?php the_ID(); ?>:checked'),
            inputDataImg = $(inputChec).data('img'),
            inputDataColor = $(inputChec).data('color');

        $('.img<?php the_ID(); ?>').css('backgroundImage', 'url(' + inputDataImg + ')');
        $('.roof').css('backgroundImage', 'url(' + inputDataImg + ')');
    }

    if('.color-shingles<?php the_ID(); ?>:checked') {
        attrSrc<?php the_ID(); ?>();
    }

  $('.color-shingles<?php the_ID(); ?>').on('change', function() {
        attrSrc<?php the_ID(); ?>();
  });
<?php } wp_reset_postdata(); ?>


/* --------------------- Slick Slider ----------------------- */
    $('.assortment__slider').slick({
      dots: false,
      arrows: true,
      autoplay: false,
      autoplaySpeed: 3000,
      infinite: true,
      speed: 500,
      slidesToShow: 4,
    });
/* ------------------- End Slick Slider --------------------- */
});
</script>

What could be the problem?
Thank you in advance.