How to make a function that inserts the names of html documents, then pushes a line of code into the selected HTML file

[OmiZ_101]

Hello all, my name is Om, and I’m currently trying to learn how to make a fully functional search bar where I can add and remove certain items on a whole separate page (which is the “admin” page). I currently have the prototype posted on my GitHub, so if you want to have a more in-depth look at both the code and the folder structuring, you can check it over on this link:

Github Repository

Currently, I have set up a value on the testSearchBar/html/apples.html folder which shows the image and description that I am planning on trying to dynamically add and remove:

SearchBar

Now I also have another HTML document, testSearchBar/html/admin.html . The code is show below:

AdminPage

The first form item (#choose-fruit) is supposed to have a function that runs through all of the HTML documents, grabs the value of the website in the head (ex. <title>Apples</title> , and push its value as one of the options on the dropdown.)

The second form item (#input-link) is supposed to essentially be the image link that would be added to the selected website.

The third form item (#input-title) is supposed to give the image a title to the selected website.

And finally, the fourth form item (#input-desc) is supposed to give a description of the item on the selected website.

Basically, I need to output the names of all HTML files inside of my HTML folder on my Github repository, then when the submit button is pressed, it needs to be able to figure out which website I’m trying to add my item to, then push this line of code to the selected website, with each form item being pushed into their respective position on this line of code:

<div id = 'completeCard'>
        <div id = 'mainCard' class = 'card border-dark'>
            <a id = '#input-title' href = '#' onclick = 'activate();'>
                <img class = 'card-img-top' src = '#input-link' alt = '#input-title'>
                <div class = 'card-body bg-secondary'>
                    <h3 class = 'text-center'>#input-title</h3>
                </div>
            </a>
        </div>
        <div id = 'card-desc' class = 'pt-2'>
            <div id = '#input-title'>
                <div class = 'card border-dark'>
                    <div class = 'card-body bg-secondary'>
                        <h6 class = 'text-center text-dark'>#input-desc</h6>
                  </div>
                </div>
            </div>
        </div>
    </div>

Now what my issue currently is as of right now is, firstly, on how to create a function that goes through every HTML document inside of the testSearchBar/html folder, and to grab its document name and push it onto the #choose-fruit dropdown. I’m also stuck on how to create a function that adds the line of code above to the selected website, with all 3 values (link, title, and desc) pushed into their respective positions inside of this line of code.

If anyone could help me out, I would greatly appreciate it, and any tips will be helpful.