C# .net core - Nested Div with ID on button press load, but works on normal load. ViewComponent

Question

I have a view component in my view and it works properly when its loaded one time. This view is part of a Slideshow so there are buttons on it. When the user clicks the next button it creates a duplicate outer div tag.

Now with both of these divs with the same ID my css is not working properly.

I have been trying to figure out why this is happening and been changing a lot around but I haven’t had any luck fixing it yet.

Any help would be greatly appreciated.

    Fileview.cshtml
@model MesserUI.ViewModels.LNPartVM
@await Component.InvokeAsync("DataPage")

DataPage.cshtml
@model MesserUI.ViewModels.LNPartVM
<div class="mx-auto contentblock">
    <a class="carousel-control-prev"  role="button" data-slide="prev" id="btnPrev">
        <span class="bg-secondary "><i class="fas fa-arrow-left carousel-icon"></i></span>
    </a>
  <div id="part" class="text-center mx-auto row justify-content-center"  >
      <img class="img-fluid mt-2" src='@ViewData["imagePath"]' />
    </div>

</div

DataPageViewComponent.cs
public class DataPageViewComponent : ViewComponent
    {
        private readonly ILogger<DataPageViewComponent> _logger;

        public DataPageViewComponent(ILogger<DataPageViewComponent> logger)
        {
            _logger = logger;
        }

        public async Task<IViewComponentResult> InvokeAsync()
        {
            if (TempData != null)
            {
                TempData.Keep();
            }

            List<LNPartVM> lstData = null;
        }
   }

After I click the next or previous button this is what I get. But on the first load I only get a single div id=part with my img inside.

Answer 1

So I figured it out, I had to reformat my pages.

fileview.cshtml

<div class="mx-auto contentblock">
        <a class="carousel-control-prev"  role="button" data-slide="prev" id="btnPrev">
            <span class="bg-secondary "><i class="fas fa-arrow-left carousel-icon"></i></span>
        </a>
        <a class="carousel-control-next"  role="button" data-slide="next" id="btnNext">
            <span class="bg-secondary "><i class="fas fa-arrow-right carousel-icon"></i></span>
        </a>
        <div id="contentData" style="height:100%; width:100%;">
            @await Component.InvokeAsync("DataPage")    
        </div>    
    </div>

DataPage.cshtml

<div id="part" class="text-center mx-auto row justify-content-center"  >
  <img class="img-fluid mt-2" src='@ViewData["imagePath"]' />
</div>

DataPageViewComponent.cs

public async Task<IViewComponentResult> InvokeAsync()
        {
            if (TempData != null)
            {
                TempData.Keep();
            }

            List<LNPartVM> lstData = null;
                if (lstData?.Count > 0)
                {
                    TempData["SlideTotal"] = lstData.Count;
                    LNPartVM partVM = lstData[partIndex];
                    return View("DataPage", partVM);
                }
            return View("DataPage");
        }