FeST1VaL

Не знаю как вы смотрели, но у слайдера точки выступают

Открываете devtools и смотрите свою вложенность... У вас в тэге P after;

.program-week__items-mobile:last-child .program-week__item-text-mobile p:after {
    display:none;
}

А по факту у вас скорее всего ошибка в SCSS
& ::after { -> &::after {

И в следующий раз создавайте лучше песочницу. Почему за вас то это должны делать в итоге?

Берете открываете devtools и смотрите...

Через JS получаете кликнутый элемент и берете из него текст и вставляете куда вам надо...

Как минимум вы делаете не радио кнопки, а чек боксы, что в вашем вариант как по мне было бы проще

Как вариант

$array1 = [
["Orange","medium"],
["Orange","big"],
["Apple","big"],
["Banane",false],
["Apple","big"],
];

$array2 = ["Apple","big"];

$index = array_search($array2,$array1);

if($index !== false) unset($array1[$index]);

var_dump($array1);

Например вы можете сделать скрытый input и на него повесить datepicker, а при клике на абзац показывать его через $( ".selector" ).datepicker( "show" );

Т.е как то так:

Как то так... Можно конечно еще сделать проверки на соседние элементы и брать их высоту... а не всех, но думаю суть ясна...Просто тогда надо смотреть на ширину list и ширину item и высчитывать сколько помещается) и тогда понимать кто соседский элемент... мне лень)

align-items: stretch; вместо center

Если не сильно менять ваш код, то примерно так или как написал Rsa97:

const photo = $('#photo');

for (let i = 0; i < data.length; i++) {
  const img = $('<img>');
  photo.append(img); 
  img.attr({ src: data[i].url, width: data[i].width, height: data[i].height, alt: data[i].alt }) 
}

Так должно быть? Тогда все просто... вы не подключили стили слайдера.
Я например их подключил так:

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />