livewire Nested <tr> component disappears on action call

Has anyone ever tried making a button that on click does something for a table; only for everything inside of the underneath the to be hidden?

I was able to display content on other parts of the page on click of a radio button, but for whatever reason, the data inside of the gets hidden on click. The data below on the other part of the page shows up fine, and even the fixed inputs inside of display normally.

I tried wire:ignore, and even wrapping a around everything else, but to avail.

Here is the table I have

            <div>
                <!-- TABLE 1 -->
                <h1>Table</h1>
                <table class="table-auto">
                    <thead>
                        <tr>
                            <th class="font-bold py-2 px-4 border-b border-l text-left"></th>
                            <th class="font-bold py-2 px-4 border-b border-l text-left">Date</th>
                            <th class="font-bold py-2 px-4 border-b border-l text-left">FLA</th>
                            <th class="font-bold py-2 px-4 border-b border-l text-left">Location Name</th>
                            <th class="font-bold py-2 px-4 border-b border-l text-left">Max Students</th>

                     </tr>
                    </thead>
                        <tbody>
                            <div wire:model="product" name="product">
                            

                                @foreach ($products as $product)
                                    <tr>
                                        <td>
                                            <input type="radio" name="displayBtn" wire:click="display({{ $product->id }})" />
                                        </td>
                                        <td class="p-2 border-b border-l text-left" value="{{ $product->id }}">{{ $product->Date }}</td>
                                        <td class="p-2 border-b border-l text-left" value="{{ $product->id }}">{{ $product->FLA }}</td>
                                        <td class="p-2 border-b border-l text-left" value="{{ $product->id }}">{{ $product->Location_Name }}</td>
                                        <td class="p-2 border-b border-l text-left" value="{{ $product->id }}">{{ $product->Max_Students }}</td>

                                    </tr>
                                
                                    @endforeach
                            </div>
                        </tbody>
                </table>
            
            </div>

My controller:

// Main proponents for level 3 dependant dropdown
public $category = null; 
public $product = null; 
public $size = null;

public Collection $categories;
public Collection $products;
public Collection $sizes;


public function mount(): void
{
    $this->categories = CourseModel::all();
    $this->products = collect();
    $this->sizes = collect();    
}


public function updatedCategory($value): void 
{
    $this->sizes = collect();
    $this->reset('size', 'product');

    $this->products = CourseModel::select('class_date.id', 'Date', 'Course_Name', 'FLA', 'Location_Name', 'Max_Students', 'Is_Primary')
    ->join('class_date','class_date.Course_ID','=','course.id')
    ->join('class_location','class_date.Location_ID','=','class_location.id')
    ->where('Course_ID', $value)
    ->get();
}