Inserting component on click between grid rows positioning

<div fxFlex class="grid-container">

    <div
      class="grid-item card"
      *ngFor="let x of fleetVehicles; let i =  index;"
      [id]="x.id"
      (click)="toggleCard(i + 1, x.id)"

    >
      <div class="inside-card">
        <header>
          <header>Audi {{ x.id }}</header>
        </header>
        <article>
          <div>
            <img src="assets/images/audi.png" style="width: 80%; height: 70%" />
          </div>

          <div>
            <footer>HVC 529 EC</footer>
          </div>
          <!-- <div
            kind="highlight"
            [class]="collapse ? 'dropdown' : 'gsMDEi'"
          ></div> -->
        </article>
      </div>
    </div>

    <li *ngIf="collapse" id="confirmBooking" class="accordion">
      <div class="card-dropdown" style="flex-direction: row; display: flex">
        <div fxFlex="60" style="width: 100%; height: 100%">
          <header class="dropdown-header">Audi</header>
          <article>
            <div style="padding: 26px;">
              <div class="icon-pos">
                <div class="p-info">
                  <i cla开发者_Python百科ss="fas fa-door-open icon-style"></i>Doors
                </div>
                <div class="p-info">
                  <i class="fas fa-users icon-style"></i>Seats
                </div>
                <div class="p-info">
                  <i class="fas fa-gear icon-style"></i>Manual
                </div>
                <div class="p-info">
                  <i class="far fa-snowflake icon-style"></i>A/C
                </div>
              </div>
              <div style="height: 100%; width: 100%;">
                <img src="assets/images/audi.png" style="width: 75%;"/>
              </div>
            </div>
            <footer style="height: 50px;">
              <div class="dropdown-footer">HVC 529 EC</div>
            </footer>
          </article>
        </div>

        <div fxFlex="40" style="width: 70%; height: 100%; text-align: -webkit-center">
          <div style="height: 100%; display: flex; justify-content: center">
            <form style="width: 50%; margin: 6px;">
              <label for="Vehicle">Vehicle</label>
              <input
                type="text"
                id="Vehicle"
                name="Vehicle"
                placeholder="Vehicle"
              />
              <label for="Name">Name</label>
              <input
                type="text"
                id="Name"
                name="Name"
                placeholder="Enter your name"
              />
              <label for="Start Date">Start Date</label>
              <input matInput type="datetime-local" />
              <br />
              <label for="End date">End date</label>
              <input matInput type="datetime-local" />
              <br />
              <label for="Customers">Customers</label>
              <select id="Customers" name="country">
                <option value="australia">VW</option>
                <option value="canada">Audi</option>
                <option value="usa">Mercedes</option>
              </select>

              <label for="Passengers">Passengers</label>
              <select id="Passengers" name="country">
                <option value="australia">1</option>
                <option value="canada">2</option>
                <option value="usa">3</option>
              </select>

              <label for="Personal Tracker">Personal Tracker</label>
              <input
                type="text"
                id="Personal Tracker"
                name="Personal Tracker"
                placeholder="If you have a personal tracker, enter the tracking number"
              />

              <label for="Floater">Floater Tracker</label>
              <select id="Floater" name="country">
                <option value="" disabled selected style="text-color: grey">
                  If you don not have a personal tracker, select a floater
                </option>
                <option value="australia">Anel</option>
                <option value="canada">Andrew</option>
                <option value="usa">Nico</option>
              </select>

              <button type="submit" class="sub-button" (click)="makeBooking()">Submit</button>
              <button type="submit" class="can-button" (click)="cancelBooking()">Cancel</button>
            </form>
          </div>
        </div>
      </div>
    </li>
</div>

here is my typescript for each card that will be displayed based on the fleetVehicles array. in the toggle card function is where I am needing to have the

 fleetVehicles = [
    { id: 1, name: 'Marc' },
    { id: 2, name: 'Marc' },
    { id: 3, name: 'Marc' },
    { id: 4, name: 'Marc' },
    { id: 5, name: 'Marc' },
    { id: 6, name: 'Marc' },
    { id: 7, name: 'Marc' },
    { id: 8, name: 'Marc' },
    { id: 9, name: 'Marc' },
    { id: 10, name: 'Marc' },
    { id: 11, name: 'Marc' },
    { id: 12, name: 'Marc' },
  ];

collapse = false;
  selectedRowIndex!: number;
  
  toggleCard(row: number, id: number) {
    this.selectedRowIndex = row;
    console.log(row);

    // this.model = {
    //   columnId: Array.from(
    //     this.renderer.parentNode(this.column).children
    //   ).indexOf(this.column),
    //   width: this.width,
    // };
    // console.log(this.model);

    if ((row = id)) {
      // this.collapse = !this.collapse;
      document.getElementById('confirmBooking');
      // b?.style.display="block";
    }
    console.log(this.fleetVehicles.find((x) => x.id == id));
  }