How can I conditionally display the input select box based on the radio button selected?

So you want to show/hide it using pure Javascript, or alpinejs?

Actually, I want to get the above result the Laravel way, which ever is better according to you. I am very much new to Laravel, if you can help me, I would be very much greatful.

Right now I on Laravel 8 with Livewire and Jetstream. I'm thinking to go with alpine.js.

Thanks for the revert! :)

Alpine is made to be used for stuff like this and it is even recommended to use it for things that does not require an ajax request (livewire). Can you post the full modal code?

Yes I will surely go with alpine, thanks for the knowledge.

Here is the form in which I need to give that feature.

<form>
    <div>

        <div>
            <h1>CREATE POSTS</h1>
        </div>

        <div>

            <div>
                <input wire:model="itemId" type="hidden" placeholder="Input Post">
            </div>

            <!--Category ID-->
            <div>
                <label for="category_id">Category ID</label>
                <select wire:model="category_id" name="category_id" id="category_id">
                    <option value=""></option>
                    @foreach($categories as $category)
                    <option value="{{ $category->id }}">{{ $category->category_name }}</option>
                    @endforeach
                    @error('category_id') <h1>{{$message}}</h1>@enderror
                </select>
            </div>

            <!--Sub-Category ID-->
            <div>
                <label for="sub_category_id">Sub-Category ID</label>
                <select wire:model="sub_category_id" name="sub_category_id" id="sub_category_id">
                    <option value=""></option>
                    @foreach($subcategories as $subcategory)
                    <option value="{{ $subcategory->id }}">{{ $subcategory->sub_category_name }}</option>
                    @endforeach
                    @error('sub_category_id') <h1>{{$message}}</h1>@enderror
                </select>
            </div>

            <div>
                <label for="item_name">Item Name</label>
                <input wire:model="item_name" type="text" placeholder="Input Item Name">
                @error('item_name') <h1>{{$message}}</h1>@enderror
            </div>

            <div>
                <label for="item_description">Item Description</label>
                <textarea wire:model="item_description" name="item_description" placeholder="Input Item Description"></textarea>
                @error('item_description') <h1>{{$message}}</h1>@enderror
            </div>

        </div>

    </div>

    <div>
        <span>
            <button wire:click.prevent="store()" type="button">
                Submit
            </button>
        </span>
        <span>
            <button wire:click="hideModal()" type="button">
                Cancel
            </button>
        </span>
    </div>

</form>

Sorry for the lengthy code. I hope this is what you need. :) I have improvised the above code further, and removed the extra stuff. Thanks already!

@toxifiedm https://youtu.be/c2M_Swxza04