How can I have one popup iframe that pulls information from a list of links?

Question

My goal is to have a searchable list that once clicked on, will display the PDF linked in a single popup iframe. I want to keep all of this on the same page, without downloading anything. For example, with links a, b, and c, id like them to all link and open up a iframe, hopefully saving time by not needing to code separate iframes for each link. Everything being pulled is from a shared drive, they are successfully pulling using both "a" and "src". I've tried placing the iframe in a popup "modal" that I have used in another area for a contact sheet, but when used it breaks the modal. I can only use javascript, jquery is non functional. I have tried 15 different scripts and none of them seem to work.

I am still learning, and im self taught, so im sure this code is ugly, but it works.

CSS:

input[type=text] {
width: 150px;
box-sizing: border-box;
border: 2px solid black;
border-raidus: 6px;
font-size: 16px;
background-color: detect;
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px;
-webkit-transition: width 0.5s ease-in-out;
transition: width 0.5s ease-in-out;
}

input[type=text]:focus {
width: 80%;
}

#myInput {
font-size: 16px;
border: 2px solid black;
margin-bottom: 10px;
}

#myUL {
list-style-type: none;
padding: 0;
margin: 0;
width: 82%;
}

#myUL li {
display: none;
}

#myUL li a {
border: 4px solid black;
background-color: #726E6D;
padding: 10px;
margin-top: 10px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
target: _blank
}

#myUL li a:hover:not(.header) {
border: 4px solid #FF6700;
}

JavaScript

<script>
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (filter!== "" && a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "block";
} else {
li[i].style.display = "none";
}
}
}
</script>

HTML:

<form>
<input type="text" id="myInput" onkeyup="myFunction()" 
placeholder="Search..." title="Search the ShareDrive">
</form>
<ul id="myUL">
<li><a href="#">Link A </a></li>
<li><a href="#">Link B </a></li>
<li><a href="#">Link C </a></li>
</ul>

Thank you, it seems like a lot to me, but hopefully not too much for you.