Laravel、データベースの２つのテーブルを利用して正解しているときの問題の色を変えたいです

前提・実現したいこと

Laravelを勉強中で、選択画面で問題を正解している場合色を変える機能を作りたいです。
開発環境はxamppでしています。

発生している問題・エラーメッセージ

mode_select.blade.php



@extends('layouts.common')

@section('pageCss')
    <link rel="stylesheet" href="{{ asset('css/mode_select.css') }}">
@endsection
@include('layouts.head')

@include('layouts.logout')
@include('layouts.navbar')

@section('content')
    <!-- 入力フォーム -->
    <form>
        @csrf
        <nav id="nav_menu">

            <ul>
                <li><a href="">数学I</a>
                    <ul>
                        <li><a href="">式の展開</a>
                            <ul>
                                @foreach ($items as $item )
                                    @if ($datas> 100&&$datas<= 110)
                                    <li><a style="background-color:#017979" href={{ route($datas->route) }}>{{ $datas->caption }}</a></li>
                                    @elseif($item->type_no > 100 && $item->type_no <= 110)
                                    <li><a href={{ route($item->route) }}>{{ $item->caption }}</a></li>
                                    @endif
                                @endforeach
                            </ul>
                        </li>
                        <li><a href="">因数分解</a>
                            <ul>
                                @foreach ($items as $item)
                                    @if ($item->type_no > 200 && $item->type_no <= 210)
                                        <li><a href={{ route($item->route) }}>{{ $item->caption }}</a></li>
                                    @endif
                                @endforeach
                            </ul>
                        </li>
                        <li><a href="">ルートの計算</a>
                            <ul>
                                @foreach ($items as $item)
                                    @if ($item->type_no > 500 && $item->type_no <= 510)
                                        <li><a href={{ route($item->route) }}>{{ $item->caption }}</a></li>
                                    @endif
                                @endforeach
                            </ul>
                        </li>
                        <li><a href="">連立１次方程式</a>
                            <ul>
                                @foreach ($items as $item)
                                    @if ($item->type_no > 1200 && $item->type_no <= 1203)
                                        <li><a href={{ route($item->route) }}>{{ $item->caption }}</a></li>
                                    @endif
                                @endforeach
                            </ul>
                        </li>
                        <li><a href="">２次方程式</a>
                            <ul>
                                @foreach ($items as $item)
                                    @if ($item->type_no > 1400 && $item->type_no <= 1407)
                                        <li><a href={{ route($item->route) }}>{{ $item->caption }}</a></li>
                                    @endif
                                @endforeach
                            </ul>
                        </li>
                        <li><a href="">２次関数、グラフと２次不等式</a>
                            <ul>
                                @foreach ($items as $item)
                                    @if ($item->type_no > 1500 && $item->type_no <= 1509)
                                        <li><a href={{ route($item->route) }}>{{ $item->caption }}</a></li>
                                    @endif
                                @endforeach
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="">数学II</a>
                    <ul>
                        <li><a href="">分数式の計算</a>
                            <ul>
                                @foreach ($items as $item)
                                    @if ($item->type_no > 300 && $item->type_no <= 310)
                                        <li><a href={{ route($item->route) }}>{{ $item->caption }}</a></li>
                                    @endif
                                @endforeach
                            </ul>
                        </li>
                        <li><a href="">整数指数の計算</a>
                            <ul>
                                @foreach ($items as $item)
                                    @if ($item->type_no > 400 && $item->type_no <= 410)
                                        <li><a href={{ route($item->route) }}>{{ $item->caption }}</a></li>
                                    @endif
                                @endforeach
 
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
        <script>

            //ウィンドウサイズ640px以下の時の動作
            $('#nav_menu>ul>li>ul>li>a').on('click', function() {
                var opener = close; //flagでクリックしたときのアコーディオンの開くまでの時間を調節
                var winWidth = $(window).width();
                if (winWidth < 700) { //ウィンドウサイズ640px以上なら
                    if ($(this).hasClass('open')) { //クリックした要素がopenクラスを持っているなら
                        $(this).removeClass('open');
                        $(this).next('ul').slideUp();
                        opener = close;
                    } else { //クリックした要素がopenクラスを持っていないなら
                        var timer; //アコーディオンが開くまでの遅延時間
                        console.log(opener);
                        if (opener !== close) {
                            timer = 200;
                        } else {
                            timer = 0;
                        }
                        $('.open').removeClass('open');
                        $('#nav_menu>ul>li>ul>li>a').next('ul').slideUp();
                        setTimeout(() => {
                            $(this).addClass('open');
                            $(this).next('ul').slideDown();
                        }, timer);
                        opener = open;
                    }
                    event.preventDefault();
                } else { //ウィンドウサイズ640px以下なら
                    return false;
                }
            });

            //ウィンドウサイズ640px以上の時の動作
            $('#nav_menu>ul>li>ul>li').on('mouseover', function() { //マウスをのせたとき
                var winWidth = $(window).width();
                if (winWidth > 700) { //ウィンドウサイズ640px以上なら
                    if (!$(this).children('a').hasClass('open')) {
                        $(this).children('a').addClass('open');
                        $(this).children('ul').stop().slideDown();
                    }
                } else { //ウィンドウサイズ640px以下なら
                    return false;
                }
            }).on('mouseout', function() { //マウスを対象から離したとき
                var winWidth = $(window).width();
                if (winWidth > 700) { //ウィンドウサイズ640px以上なら
                    $(this).children('a').removeClass('open');
                    $(this).children('ul').stop().slideUp();
                } else { //ウィンドウサイズ640px以下なら
                    return false;
                }
            });
            $('#nav_menu>ul>li>ul>li>a').on('click', function() {
                event.preventDefault();
            });
        </script>
    </form>

@endsection
@section('pageJs')
    <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
    </script>
@endsection
@include('layouts.footer')

ModeSelectController.php

<?php

namespace App\Http\Controllers;

use App\EnshuRecord;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;
use App\ModeSelect;
use Illuminate\Http\Request;

class ModeSelectController extends Controller
{

    public function index(Request $request)
    {
        //item_infoテーブルの全データ取得
        $items = ModeSelect::orderBy('type_no', 'asc')->get();
        $userid=Auth::user()->userid;
        $datas=DB::select(
        "SELECT `enshu_record`.`name`,`enshu_record`.`u_id`,`enshu_record`.`type`,
        `enshu_record`.`result`,`item_info`.`type_no`,`item_info`.`caption`,
        `item_info`.`route`
        FROM `enshu_record`
        JOIN item_info ON item_info.type_no = enshu_record.type
        WHERE result = 1 AND u_id = '" . $userid . "'
        GROUP BY `enshu_record`.`type`,`enshu_record`.`u_id`,`enshu_record`.`name`,
        `enshu_record`.`result`,`item_info`.`type_no`,`item_info`.`caption`,
        `item_info`.`route`
        ORDER BY LPAD(type_no,4,0) ASC
        ");


        return view('mode_select',['datas'=>$datas],compact('items'));
    }
}

enshu_recordのテーブル

item_infoのテーブル