Event Delegation in identical divs

Question

I am very new to event delegation and I'm having trouble selecting the correct div to change. I have a partial view that can be displayed multiple times on a webpage. However, when it is displayed multiple times, the JavaScript only works for the first instance of the partial view. So I tried to use event delegation to solve my problem but it still only works on the first instance. I think it might be anytime I select by Id, since they share ids, it is selecting only the first id it sees and thus only working on the first instance of the partial view. Here is my Partial View's HTML:

<div id="AddMedia">
    <form>
        <div class="container">
            <div class="form-row">
                <div class="col-6 dropdown my-2 px-0">
                    <label class="control-label">Source:<span class="text-danger ml-1">*</span></label>
                    <select id="SourceFromSelect" asp-for="Medias.SourceFrom" asp-items="Html.GetEnumSelectList(typeof(SourceFromEnum))" style="width:85%;" class="btn border-dark" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <option class="dropdown-item" selected>Select</option>
                    </select>
                    <span asp-validation-for="Medias.SourceFrom" class="text-danger"></span>
                </div>
            </div>
            <div class="form-row">
                <div class="col-5">
                    <div id="MediaFile" class="form-group">
                        <label for="exampleFormControlFile1">Pick a File</label>
                        <input type="file" class="form-control-file" id="exampleFormControlFile1">
                    </div>
                    <div id="MediaLink" class="form-group">
                        <label for="url">Link the Media</label>
                        <input type="url" class="form-control" id="exampleFormControlFile1">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

And here is the script for it:

  document.getElementById("MediaFile").style.display = "none";

    const addMedia = document.querySelector("#AddMedia")
    addMedia.addEventListener('change', function (e) {
        if (e.target.getAttribute('id') === 'SourceFromSelect') {
            changeFile(e);
        }
    });   

    function changeFile(e) {
       // $("#SourceFromSelect").change(function () {
        console.log(e.target)
            var e = document.getElementById("SourceFromSelect");
            var strUser = e.options[e.selectedIndex].text;
            if (strUser == "Phone or Computer") {
                document.getElementById("MediaFile").style.display = "inline-block";
                document.getElementById("MediaLink").style.display = "none";
            }
            else {
                document.getElementById("MediaFile").style.display = "none";
                document.getElementById("MediaLink").style.display = "inline-block";
            }
       // })
    }

Finally here is where I call the Partial view:

<div id="MediaList">
        @for (i = 0; i < MediaCount; ++i)
        {
            <partial name="_MediaPartial" />
        }
</div>

Answer 1

As @AlwaysHelping said in comment, Id selector MUST be unique for element. since you can not change their id, you can use name or class selector.

I made a demo based on your codes which change the id to name in partial. Also, I use jquery, it is much easier.

Partial view:

<div name="AddMedia">
    <form>
        <div class="container">
            <div class="form-row">
                <div class="col-6 dropdown my-2 px-0">
                    <label class="control-label">Source:<span class="text-danger ml-1">*</span></label>
                    <select name="SourceFromSelect" style="width:85%;" class="btn border-dark">
                        <option selected>Select</option>
                        <option value="1">Phone or Computer</option>
                        <option value="2">Other Media</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="col-5">
                    <div name="MediaFile" class="form-group">
                        <label for="exampleFormControlFile1">Pick a File</label>
                        <input type="file" class="form-control-file" name="exampleFormControlFile1">
                    </div>
                    <div name="MediaLink" class="form-group">
                        <label for="url">Link the Media</label>
                        <input type="url" class="form-control" name="exampleFormControlFile1">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

Scripts：

<script>
    $("[name = MediaFile]").css("display", "none")

    $("[name = SourceFromSelect]").on('change', function () {
        var parent = $(this.parentElement.parentElement.nextElementSibling)
        if ($(this).find(":selected").text() == "Phone or Computer") {
            parent.find("[name = MediaFile]").css("display", "inline-block");
            parent.find("[name = MediaLink]").css("display", "none");
        }
        else {
            parent.find("[name = MediaFile]").css("display", "none");
            parent.find("[name = MediaLink]").css("display", "inline-block");
        }

    });

</script>

Result: