Issue with Dynamically Loading JSON Data in View Files

Have you searched through other issues to see if your problem is already reported or has been fixed?

Yes, I did not find it.

Did you read the documentation?

Yes, I did not find it.

Have you tried to publish the views?

No, this error is not related to views.

Is there an error in the console?

PHP Version

8.2.16

PowerGrid

5.4

Laravel

10.48

Livewire

3.4

Alpine JS

3.13.5

Theme

Tailwind 3.x, Tailwind 3.x with tailwind/forms

Describe the bug.

I am encountering an issue when attempting to dynamically load JSON data into a view file using the package Powergrid and mohsen1/json-formatter-js. Specifically, the JSON data is supposed to be rendered inside a div element identified by a class that includes the row ID (e.g., json-{{$row->id}}). The expected behavior is for the JSON data to be parsed and formatted using JSONFormatter and then appended to the corresponding div element.

https://github.com/Power-Components/livewire-powergrid/assets/138211005/6c64fdaa-e81d-4483-ba91-adfa4a8d44d4

To Reproduce...

No response

Extra information

Detail::make()
    ->view('tables.details.raw-data-json')
    ->params(['tablename' => 'pg:eventRefresh-'.$this->tableName])
    ->showCollapseIcon()
    ->collapseOthers(),

```html
<div class="p-2 bg-white border border-slate-200">
    <div class="json-{{$row->id}}"></div>
    @script
    <script>
        setTimeout(() => {
            const myJSON = JSON.parse(@js($row->json));
            const formatter = new window.JSONFormatter(myJSON);
            document.getElementsByClassName('json-{{$row->id}}')[0].appendChild(formatter.render());
        }, 50);
    </script>
    @endscript
</div>

I've tried with and without @script, same results.

Power-Components / livewire-powergrid