Rendering blade template base on Javascript Condition

I have

an account > index page with a table, and other modals, that I slice into a small blade views. On that page, I have 100000 accounts.

Problem

There is a section of PHP on top of my edit modal that is making 100000 curls requests, and cause a huge delay on my account > index page.

My goal

is to prevent rendering those blades right up front and only render if the user click on the Pencil icon.

---

Here is my account.index blade

@extends('layouts.internal.master')
    @section('content')



    <div class="panel account-panel" style="padding: 30px;">
      <div class="panel-body">


        <div class="col-sm-2">
          <a id="account-create" class="btn btn-success btn-block mb20" data-toggle="modal" data-target=".account-create">Create</a>
        </div>

        <div class="table-responsive" style="margin-bottom: 0;">
          <table class="table" id="account-table">
            <thead>
              <tr>
                <th>#</th>
                <th>Account ID</th>
                <th>Customer Type</th>
                <th>Name</th>
                <th>Email</th>
                <th class="text-center">Auto Provisioning</th>
                <th class="text-center">AP</th>
                <th style="min-width: 90px;">Action</th>
              </tr>
            </thead>
            <tbody>

              <?php
              $x = 0;

              ?>
              @foreach( $accounts as $account )

              @if($account->email_address !== 'admin@benunets.com')

              <tr>
                <td></td>
                <td><a href="/account/{!! $account->account_id !!}">{!! $account->account_id !!}</a></td>
                <td>

                " width="30px"> --}}

                <span class="badge" style="background-color: ">{!! $customer_type !!}</span></td>
                <td>{!! ucfirst($account->first_name) !!} {!! ucfirst($account->last_name) !!}</td>
                <td>{!! $account->email_address !!}</td>
                <td class="text-center" >

                  @if($user != null AND $user->auto_provisioning == 1)
                  {!! Helper::intBoolToIcon($user->auto_provisioning) !!}
                  @else
                  <i title="false" style="font-size: 18px; color: #F44336" class="fa fa-times"></i>
                  @endif

                </td>
                <td class="text-center" ><b>{!! $count_cpe !!}</b></td>
                <td class="text-center">

                  <!-- Buttons -->
                  <div class="tool-buttons">
                    <ul class="button-list">

                      <!-- Edit -->
                      <li><a data-toggle="modal" data-target=".account-edit-{!! $account->account_id !!}" class="tooltips account-edit" data-id="{!! $account->account_id !!}" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i class="fa fa-pencil"></i></a></li>

                      <!-- Delete -->
                      <li><a data-toggle="modal" data-target=".account-destroy-{!! $account->account_id !!}" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash-o"></i></a></li>
                    </ul>
                  </div>

                </td>
              </tr>

              @endif
              @endforeach

            </tbody>
          </table>
        </div>
      </div>
    </div>

    @include('account.modal.account.destroy')
    @include('account.modal.account.create')
    @include('account.modal.account.edit')


@section('pagescripts')

<script type="text/javascript">


  /*=============================================================================================
  =            Edit            =
  ============================*/


  //Edit Mode
  $('.account-edit').click( function() {


    var id = $(this).data("id");
    console.log(id);

    //Style
    var val2 = $("#auto_provisioning_switch-"+id).val();

    //Set the AP switch
    if(val2 == 1){
      $("#auto_provisioning_switch-"+id).bootstrapSwitch('state', true);
      $("[name='auto_provisioning_switch']").val(1);
      $('#service_plan_div-'+id).show();

      // Set the service plan dd menu
      var ajax = $.ajax({url: '/api/account/'+id+'/service_plan'});
      ajax.done(function (service_plan) {
        console.log(service_plan+' | id : ' + id );
        $('#service_plan-'+id).val(service_plan);
        });

    }else{
      $("#auto_provisioning_switch-"+id).bootstrapSwitch('state', false);
      $("[name='auto_provisioning_switch']").val(0);
      $('#service_plan_div-'+id).hide();
    }


  });






</script>

@stop

---

I only want to render

@include('account.modal.account.edit')

when I clicked on the pencil to edit.

OR

@include('account.modal.account.destroy')

when I clicked on the trash to delete.

---

How do I do that ?

---

Any hints on how to prevent that will be a huge help !!!

via Chebli Mohamed