How to keep the current tab active on page reload in tailwind javascript icons tabs

See more:

C#

ASP.NET

JScript.NET

WebForms

, +

Hi, I'm developing a web page using Tailwind Framework and their JavaScript Icons Tabs. It works great except for when I click on button Download at third tab, it will go direct to first tab.. T_T.. Im still new for this, any help would be greatly appreciated.

What I have tried:

<!-- Details tab 1-->
<div class="block" id="tab-first">
<div class="mb-2 border-solid border-gray-300 rounded border shadow-sm w-full">
	<div class="bg-gray-200 px-2 py-3 border-solid border-gray-200 border-b font-bold">
		PROFORMA INVOICE
	</div>

	<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 flex flex-col">
			<div class="-mx-3 md:flex">
				<div class="md:w-40 px-1 mb-2 md:mb-0">
				<label class="w-full text-black py-2 inline-block align-middle">
					PI Number
				</label>
				</div>
				<div>
				<asp:TextBox ID="txtbx_pino" runat="server" type="text" class="w-full border px-4 py-2 text-gray-700 bg-gray-200 border-b border-gray-300" MaxLength="100" placeholder=""></asp:TextBox>
				</div>
															  
				<div class="md:w-10 px-1 mb-2 md:mb-0">
				</div>

				<div class="md:w-16 px-1 mb-2 md:mb-0">
				<label class="w-full text-black py-2 inline-block align-middle">
					PI Date
				</label>
				</div>
				<div><asp:TextBox ID="txtbx_pidate" runat="server" type="text" class="w-full border px-4 py-2 text-gray-700 bg-gray-200 border-b border-gray-300" MaxLength="100" placeholder=""></asp:TextBox></div>
				<div>
				<asp:ImageButton id="btn_download_pifile" runat="server" AlternateText="ImageButton" ImageAlign="left" ImageUrl="images/icons/download.png" class="mx-1" OnClick="btn_download_pifile_Click"/>
				</div>
			</div>
	</div>
</div>

<!-- Details tab 3-->
<div class="hidden" id="tab-third">
<div class="mb-2 border-solid border-gray-300 rounded border shadow-sm w-full">
	<div class="bg-gray-200 px-2 py-3 border-solid border-gray-200 border-b font-bold">
		SHIPMENT SCHEDULE
	</div>
		<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 flex flex-col">
				<div class="-mx-3 md:flex">
					<div class="w-1/3 px-1 mb-2 md:mb-0">
					<label class="w-full text-black py-2 inline-block align-middle font-bold">
						Booking Confirmation :
					</label>
					</div>                                           
				</div>

				<div class="-mx-3 md:flex ">
					<div class="md:w-1/3 px-1 mb-2 md:mb-0">
					<label class="w-full text-black py-2 inline-block align-middle">
						Booking Agent Details for Shipment :- <br />
						Freight Forwarder Name / Address / Email
					</label>
					</div>
					<div class="md:w-5 px-1 mb-2 md:mb-0"></div>
					<div class="w-3/6">
					<asp:TextBox ID="txtbx_bookingagentdetailsforshipment" runat="server" type="text" class="w-full border px-4 py-2 text-gray-700 bg-gray-200 border-b border-gray-300" MaxLength="10000"  placeholder="Write Here" TextMode="MultiLine"></asp:TextBox>
					</div>
				</div>

				<div class="-mx-3 md:flex ">
					<div class="md:w-1/3 px-1 mb-2 md:mb-0">
					<label class="w-full text-black py-2 inline-block align-middle">
						Booking for CIF Shipment
					</label>
					</div>
					<div class="md:w-5 px-1 mb-2 md:mb-0"></div>
					<div class="w-3/6">
					<asp:TextBox ID="txtbx_bookingforcifshipment" runat="server" type="text" class="w-full border px-4 py-2 text-gray-700 bg-gray-200 border-b border-gray-300" MaxLength="100" placeholder=""></asp:TextBox>
					</div>
				</div>

				<div class="-mx-3 md:flex ">
					<div class="md:w-1/3 px-1 mb-2 md:mb-0">
					<label class="w-full text-black py-2 inline-block align-middle">
						Shipment Delay Notice
					</label>
					</div>
					<div class="md:w-5 px-1 mb-2 md:mb-0"></div>
					<div class="w-3/6">
					<asp:TextBox ID="txtbx_shipmentdelaynotice" runat="server" type="text" class="w-full border px-4 py-2 text-gray-700 bg-gray-200 border-b border-gray-300" MaxLength="100" placeholder=""></asp:TextBox>
					</div>
					<div>
					<asp:ImageButton id="btn_shipmentdelaynotice" runat="server" AlternateText="ImageButton" ImageAlign="left" ImageUrl="images/icons/download.png" class="mx-1"/>
					</div>
				</div>
		</div>


    <script type="text/javascript">
        function changeAtiveTab(event, tabID) {
            let element = event.target;
            while (element.nodeName !== "A") {
                element = element.parentNode;
            }
            ulElement = element.parentNode.parentNode;
            aElements = ulElement.querySelectorAll("li > a");
            tabContents = document.getElementById("tabs-id").querySelectorAll(".tab-content > div");
            for (let i = 0; i < aElements.length; i++) {
                aElements[i].classList.remove("text-black");
                aElements[i].classList.remove("bg-green-200");
                aElements[i].classList.add("text-green-700");
                aElements[i].classList.add("bg-white");
                tabContents[i].classList.add("hidden");
                tabContents[i].classList.remove("block");
            }
            element.classList.remove("text-green-700");
            element.classList.remove("bg-white");
            element.classList.add("text-black");
            element.classList.add("bg-green-200");
            document.getElementById(tabID).classList.remove("hidden");
            document.getElementById(tabID).classList.add("block");
        }
    </script>