Add/removing dynamic select box using jQuery with PHP Ajax

I do not know much about jQuery and Ajax, so i am trying to build a site like this https://www.webslesson.info/2019/09/add-or-remove-dynamic-dependent-select-box-using-jquery-with-php-ajax.html with laravel.

My Controller:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Cablelist;
use App\Cablename;
use App\Cabletyp;
use App\Ordernumber;
use App\Typeofmachine;
use Auth;
use Redirect;
use PDF;
use DB;

class CablelistsController extends Controller
{
    /**

     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
     //https://www.webslesson.info/2019/04/dynamically-add-remove-input-fields-in-laravel-58-using-jquery-ajax.html

    public function index()
    {
        //
        $data['cablelists'] = Cablelist::orderBy('idcablelists','desc')->paginate(10);

       return view('cablelist.test',$data);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
     /*
     <?php

     */
    public function create()
    {
        //$cablelists
        $cablenames = Cablename::with('cablelist')->select(['cablenamescol', 'idcablenames'])->get();
        return view('cablelist.test')->with('cablenames', $cablenames);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
        if($request->ajax())

       {
         $rules = array(
         'lengh.*' => 'required',
         'cablename_id.*' => 'required',
         'cablenames_cabletyps_id.*' => 'required',
         'typeofmachine_id.*' => 'required',
       );

      $error = Validator::make($request->all(), $rules);
      if($error->fails())
      {
       return response()->json([
        'error'  => $error->errors()->all()
       ]);

      }

      $lengh = $request->lengh;
      $cablename_id= $request->cablename_id;
      $cablenames_cabletyps_id = $request->cablenames_cabletyps_id;
      $typeofmachine_id= $request->typeofmachine_id;

      for($count = 0; $count < count($lengh); $count++)
      {
       $data = array(
        'lengh' => $lengh[$count],
        'cablename_id'  => $cablename_id[$count],
        'cablenames_cabletyps_id ' => $cablenames_cabletyps_id[$count],
        'typeofmachine_id'  => $typeofmachine_id[$count]
       );

       $insert_data[] = $data;
      }

      DynamicField::insert($insert_data);
      /*return response()->json([
       'success'  => 'Data Added successfully.'
       ]);
       */
      return Redirect::to('cablelists')
      ->with('success','Greate! Cablenames created successfully.');
      }
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
        $where = array('idcablelists' => $id);
        $data['cablelists_info'] = Cablelist::where($where)->first();
        $cablenames = Cablename::with('cablelist')->select(['cablelistscol', 'idcablelists'])->get();

        return view('cablelist.edit', $data)->with('cablenames', $cablenames);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
        //https://w3path.com/laravel-6-tutorial-build-your-first-crud-app-with-laravel/
        $request->validate([
          'lengh' => 'required',
          'cablename_id' => 'required',
          'cablenames_cabletyps_id' => 'required',
          'typeofmachine_id' => 'required',
        ]);
        $update = ['lengh'=> $request->lengh, 'cablename_id' => $request->cablename_id,
      'cablenames_cabletyps_id'  => $request->cablenames_cabletyps_id, 'typeofmachine_id'=> $request->typeofmachine_id];

      Cablelist::where('idcablelists',$id)->update($update);
        return Redirect::to('cablelists')
       ->with('success','Great! Cablelist updated successfully');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
        Cablelist::where('idcablelists',$id)->delete();

        return Redirect::to('cablelists')->with('success','Cablelist deleted successfully');
    }
}

My Model:

<?php

namespace App;
use App\Cablename;
use Illuminate\Database\Eloquent\Model;

class Cablelist extends Model
{
    //
    protected $primaryKey = 'idcablelists';
    protected $fillable = [
    'lengh',
    'cablename_id',
    'cablenames_cabletyps_id',
    'typeofmachine_id',
   ];
   public function cablelist()
   {
       return $this->belongsto(Cablename::class, 'cablename_id',
        'idcablenames');
       //'idcablenames', 'cablenames_cabletyps_id');
       //->orderBy('idcabletyps', 'desc');
   }
}

My Blade:

<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Laravel 5.8 - DataTables Server Side Processing using Ajax</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 </head>
 <body>
  <div class="container">
     <br />
     <h3 align="center">Kabelliste 3.0</h3>
     <br />
     <div class="text-right">
       <a href="{{ url('/home') }}" class="btn btn-success mb-2">Home</a>
     </div>
     <h3 align="center">Testkabel</h3>
   <div class="table-responsive">
                <form method="post" id="cablelists">
                 <span id="result"></span>
                 <table class="table table-bordered table-striped" id="cablelists">
               <thead>
                 <tr>
                    <th>Iidcablelists</th>
                    <th>lengh</th>
                    <th>cablename_id</th>
                    <th>cablenames_cabletyps_id</th>
                    <th>typeofmachine_id</th>
                    <th>Erstellt am:</th>
                    <th colspan="2" class="text-center">Action</th>
                 </tr>
               </thead>
               <tbody>

               </tbody>
               <tfoot>
                <tr>
                <td colspan="6" align="right">&nbsp;</td>
                <td>
                  @csrf
                  <input type="submit" name="save" id="save" class="btn btn-primary" value="Save" />
                 </td>
                </tr>
               </tfoot>
           </table>
          </form>
   </div>
  </div>
 </body>

</html>

<script>
$(document).ready(function(){

 var count = 1;

 dynamic_field(count);

 function dynamic_field(number)
 {
  html = '<tr>';
        html += '<td><input type="text" name="idcablelists[]" class="form-control" /></td>';
        html += '<td><input type="text" name="lengh[]" class="form-control" /></td>';
        html += '<td><select name="cablename_id[]" class="form-control" cablename_id="'+count+'">
        <option value="">Wähle Kabeltyp aus.</option>
        @foreach($cablenames as $cablename)
        <option value="{{$cablename->idcablenames}}">{{$cablename->IndNr}}</option>
        @endforeach
        <span class="text-danger">{{ $errors->first('IndNr') }}</span>
        </select></td>';
        html += '<td><input type="text" name="cablenames_cabletyps_id[]" class="form-control" /></td>';
        html += '<td><input type="text" name="typeofmachine_id[]" class="form-control" /></td>';
        html += '<td><input type="text" name="created_at[]" class="form-control" /></td>';
        if(number > 1)
        {
            html += '<td><button type="button" name="remove" id="" class="btn btn-danger remove">Remove</button></td></tr>';
            $('tbody').append(html);
        }
        else
        {
            html += '<td><button type="button" name="add" id="add" class="btn btn-success">Add</button></td></tr>';
            $('tbody').html(html);
        }
 }

 $(document).on('click', '#add', function(){
  count++;
  dynamic_field(count);
 });

 $(document).on('click', '.remove', function(){
  count--;
  $(this).closest("tr").remove();
 });

 $('#dynamic_form').on('submit', function(event){
        event.preventDefault();
        $.ajax({
            url:'{{ route("cablelists.store") }}',
            method:'post',
            data:$(this).serialize(),
            dataType:'json',
            beforeSend:function(){
                $('#save').attr('disabled','disabled');
            },
            success:function(data)
            {
                if(data.error)
                {
                    var error_html = '';
                    for(var count = 0; count < data.error.length; count++)
                    {
                        error_html += '<p>'+data.error[count]+'</p>';
                    }
                    $('#result').html('<div class="alert alert-danger">'+error_html+'</div>');
                }
                else
                {
                    dynamic_field(1);
                    $('#result').html('<div class="alert alert-success">'+data.success+'</div>');
                }
                $('#save').attr('disabled', false);
            }
        })
 });

});
</script>

My dynamic select box in the blade does not work.

html += '<td><select name="cablename_id[]" class="form-control" cablename_id="'+count+'">
        <option value="">Wähle Kabeltyp aus.</option>
        @foreach($cablenames as $cablename)
        <option value="{{$cablename->idcablenames}}">{{$cablename->IndNr}}</option>
        @endforeach
        <span class="text-danger">{{ $errors->first('IndNr') }}</span>
        </select></td>';

What is wrong? Thx for help.