Inserting component on click between grid rows positioning - css

Question

I have the exact same issue depicted in this post(link attached below), the only difference is that I can't seem to get the positioning correct for the new element. Currently, my element just inserts at the end of the grid instead of below the card clicked.
Inserting component on click between grid rows
I have been trying to use the ID and row index of each card to hopefully get the new element to drop below the card that was clicked.
in the code below I am trying to append the on button click to a specific card based on its ID
<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 class="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 display on click.
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));
}