How do i make a javascript popup input field in php laravel?

Question

I'm trying to make a popup module that once a button is clicked, it displays a popup with some fields like name surname etc that the user can fill out and save. However i tried to do that but i can't seem to connect it together. I'm not sure if anyone can give me directions on where i'm supposed to put the html css and javascript? As im using php laravel.

This is the view page.

@extends('layouts.adminmaster')

@section('section')
  <div class="container paddingTop20">
    <h1>Negombo View Places</h1>
    <hr>
    <div class="row">
      <div id="date-picker-example" class="col-xs-3">
        <form action="{{ route('admin.place.submit') }}" method="POST" id="form1" style="
        padding: 7px;
        margin-left: 15px;
        justify-content: flex-end;
        text-shadow: 0 0 black;
        float: right;
    ">
          @csrf
          <input type="date" id="fDate" name="startDate" value="{{ $startDate ?? '' }}">
          <input type="date" id="tDate" name="endDate" value="{{ $endDate ?? '' }}">  
          <input type="reset" value="Reset">
          <input type="submit" value="Submit">  
        </form>


        </div>
        <div class="col-sm-12">  
            <table id="example" class="table table-striped table-bordered" style="width:100%">
                <thead>
                    <tr>
                        <th>Place ID</th> 
                        <th>Place Name</th>
                        <th>Coordinates (Umbrella)</th>
                        <th>Coordinates (N)</th>
                        <th>Coordinates (E)</th>
                        <th>Map Name</th>
                        <th>Availabilty</th>
                        @if (Auth::user()->role == "admin")
                          <th>Action</th>
                        @endif
                        <th>Quick Book</th>

                    </tr>
                </thead>
                <div id="preloader"></div>
                <tbody id="hidden_table_processing">
                  @foreach ($places ?? '' as $place)
                    <tr>
                        <td>{{ $place->place_id }}</td>
                        <td>{{ $place->place_name }}</td>
                        <td>L({{ $place->co_xl }}, {{ $place->co_yl }})</td>
                        <td>{{ $place->coordsn }}</td>
                        <td>{{ $place->coordse }}</td>
                        <td>{{ $place->map_name }}</td>


                      <td>
        
                      @if ($place->status==0)
                        <span style="color: green">Available</span>
                      @endif
                      @if ($place->status==-1)
                        <span style="color: gray"> Not Available </span>
                      @endif
                      @if ($place->status==2)
                        <span  style="color: red"> Booked </span>
                      @endif
                     </td>
  
                        @if (Auth::user()->role == "admin")
                          <td> <a href="{{ route('admin.place.edit', $place->place_id) }}">Edit</a> /
                            @if ($place->status == -1)
                              <a href="{{ route('admin.place.changestatus', $place->place_id) }}">Activate</a>
                            @else
                              <a href="{{ route('admin.place.changestatus', $place->place_id) }}">Deactivate</a>
                              
                            @endif

                          </td>
                        @endif

                        <td>
                          @if ($place->status==0)
                            <span></span>

// THIS IS THE BUTTON WHERE ONCE CLICKED THE POPUP SHOULD SHOW UP

                        <button type="button" class="btn btn-success dashboardcardbodystyle2" data-toggle="modal" data-target="#myModal"></button>

// END 

                          @endif
                          @if ($place->status==-1)
                            <span>Book</span>
                          @endif
                          @if ($place->status==2)
                            <span>Booked</span>
                          @endif
                         </td>
                    </tr>
                  @endforeach
                </tbody>
            </table>

            <div id="loader_space"></div>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>

        <script>
          $('#myModal').on('shown.bs.modal', function () {
          $('#myInput').trigger('focus')
        })
        </script>

            <script>


              $('.input-daterange input').each(function() {
              $(this).datepicker('clearDates');
              });
            </script>

              

            <script>   
            var startDate = document.getElementById('fDate').value;
            var endDate = document.getElementById('tDate').value;
            document.write(startDate);
            document.write(endDate);

                paceOptions = {
                  ajax: true,
                  document: true,
                  eventLag: false
                };

                Pace.on('done', function() {
                  $('#preloader').delay(100).fadeOut(500);
                  document.getElementById("loader_space").style.display = "none";
                  $('#hidden_table_processing').fadeIn(200);
                });

            </script>

        </div>
    </div>
  </div>

    @endsection

Answer 1

You can do it something like this

<table class="table table-striped table-nowrap custom-table mb-0 " id="tblAllOrder">
    <thead>
     <tr>
        <th>Price (&pound;)</th>
        <th>Status</th>
    </tr>
    </thead>
    <tbody>
       @foreach($orderList as $result)
        <tr>                                
           <td>{{$result->id}}</td>
           <td>
            <a href="#" data-toggle="modal" data-target="#project-details">{{$output[0]}} </br> {{$output[1]}}</a>
            </td>
    @endforeach
   </tbody>
</table>

And then add model anywhere where your section ends

<div class="modal right fade" id="project-details" tabindex="-1" role="dialog" aria-modal="true">
          <div class="modal-dialog" role="document">
            <button type="button" class="close md-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <div class="modal-content" style="overflow-y: auto;">

              <div class="modal-header">
                <button type="button" class="close xs-close" data-dismiss="modal">×</button>
                <div class="row w-100">
                   <div class="col-md-7 account d-flex">
                        Order Detail 
                     </div>
                </div>
              </div>
              <div class="orderDetail"> Order Detail  </div>
            </div><!-- modal-content -->
          </div><!-- modal-dialog -->
        </div><!-- modal -->

now when you click the anchor tag each time it will open this model.