How can I show/hide textarea values when the user types on the search bar?

<script
  src="https://code.jquery.com/jquery-3.4.0.min.js"
  integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script type="text/javascript">

          $(document).ready(function() 
          {
            
              //Store the Original Values of the 2 Text Areas
            var originalDirect = [];
            var originalFile = [];
            var origNum1 = 0;
            var origNum2 = 0;

            //Save the Original Values of the 2 Text Areas everytime the Generate Button is clicked
            $('#genButton').click(function()
            {
                originalDirect.length = 0;
                originalFile.length = 0;
                origNum1 = 0;
                origNum2 = 0;


                var lines0 = $('#outputText').val();
                var lines0b = $('#filenameText').val();
                lines0 = lines0.split(/\n/);
                lines0b = lines0b.split(/\n/);

                for(var o=0; o < lines0.length; o++)
                {
                    originalDirect.push((lines0[o]));
                    origNum1++;
                }

                for(var p=0; p < lines0b.length; p++)
                {
                    originalFile.push((lines0b[p]));
                    origNum2++;
                }


            });

            //SEARCH BAR FUNCTION in PATH + FILENAME TEXTAREA
            $('#searchDir').keyup(function()
              {
                var val = $(this).val();
                var lines1 = $('#outputText').val();
                lines1 = lines1.split(/\n/);
                var countDir = 0;
            
                    if(val != '')
                    {
                        var searchDirect = [];

                        for (var a=0; a < lines1.length; a++)
                        {
                            var text = lines1[a];
                            if(text.indexOf(val) != -1)
                              {
                                searchDirect.push((lines1[a]));
                                countDir++;
                              }
                        }

                        $('#outputText').val(searchDirect.join('\n'));
                        $('.numbSrc1').html(countDir);
                    }
                    else
                    {
                         $('#outputText').val(originalDirect.join('\n'));
                         $('.numbSrc1').html(origNum1);
                    }

                   
              });

            //SEARCH BAR FUNCTION in FILENAME ONLY TEXTAREA
            $('#searchFil').keyup(function()
              {
                var val2 = $(this).val();
                var lines1b = $('#filenameText').val();
                lines1b = lines1b.split(/\n/);
                var countDir2 = 0;
            
                    if(val2 != '')
                    {
                        var searchDirect2 = [];

                        for (var a=0; a < lines1b.length; a++)
                        {
                            var text2 = lines1b[a];
                            if(text2.indexOf(val2) != -1)
                              {
                                searchDirect2.push((lines1b[a]));
                                countDir2++;
                              }
                        }

                        $('#filenameText').val(searchDirect2.join('\n'));
                        $('.numbSrc2').html(countDir2);
                    }
                    else
                    {
                         $('#filenameText').val(originalFile.join('\n'));
                         $('.numbSrc2').html(origNum2);
                    }

                   
              });

          
     

            $('.output1').hover(function(){
                $('.copy-btn1').addClass('copy-btn-show');
            }, function(){
                $('.copy-btn1').removeClass('copy-btn-show');
            });

            $('.output2').hover(function(){
                $('.copy-btn2').addClass('copy-btn-show');
            }, function(){
                $('.copy-btn2').removeClass('copy-btn-show');
            });


            $('.copy-btn1').click(function()
            {
                $('.copy-btn1').attr('data-content', 'Copied to clipboard!')
                $('.copy-btn1').popover('show');
                var copyText = $('#outputText');
                copyText.select();
                document.execCommand("copy");
                copyText.blur();
                setTimeout(function(){ $('.copy-btn1').popover('hide') }, 1000);
            });

            $('.copy-btn2').click(function()
            {
                $('.copy-btn2').attr('data-content', 'Copied to clipboard!')
                $('.copy-btn2').popover('show');
                var copyText = $('#filenameText');
                copyText.select();
                document.execCommand("copy");
                copyText.blur();
                setTimeout(function(){ $('.copy-btn2').popover('hide') }, 1000);
            });


            

            
         


          });



        function makeFileList() {
            var input = document.getElementById("filesToUpload");
            var addtext = $('#addText').val();
            //var inputAffix = $('#inputAffix').val();
            var ul = document.getElementById("fileList");
            var outputData = [];
            var fileNames = [];
            var countSrc = 0;
            while (ul.hasChildNodes()) {

                ul.removeChild(ul.firstChild);
            }
            for (var i = 0; i < input.files.length; i++) {
                // var p = document.createElement("p");
                // p.innerHTML = addtext + input.files[i].name;
                outputData.push((addtext + input.files[i].name));
                fileNames.push((input.files[i].name));
                countSrc++;
                // ul.appendChild(p);
            }
            if(!ul.hasChildNodes()) {
                // var p = document.createElement("p");
                // p.innerHTML = 'No Files Selected';
                // ul.appendChild(p);
            }



            $('#outputText').val(outputData.join('\n'));
            $('#filenameText').val(fileNames.join('\n'));
            $('.numbSrc1').html(countSrc);
            $('.numbSrc2').html(countSrc);

        }

        function countImages(changeBGColor)
        {
            var input = document.getElementById("filesToUpload");
            var labelElem = document.getElementById("labelUpload");
            var upCont = document.getElementById("uploadCont");
            // $('#countImg').html(input.files.length + " Images");

            if (input.files.length == 0)
            {
                $('#labelUpload').html(" No Image Uploaded!");
                labelElem.style.background = "red";
                upCont.style.boxShadow = "1px 1px 5px 1px red";
                upCont.style.border = "none";
                upCont.style.borderRadius = "8px";
                labelElem.style.color = 'white';
                labelElem.border = "none";
                labelElem.style.fontWeight = '700';
            }
            else if (input.files.length == 1)
            {
                $('#labelUpload').html(input.files.length + " Image Uploaded!");
                labelElem.style.background = changeBGColor;
                upCont.style.boxShadow = "1px 1px 5px 1px #097579";
                upCont.style.border = "none";
                upCont.style.borderRadius = "8px";
                labelElem.style.color = 'white';
                labelElem.border = "none";
                labelElem.style.fontWeight = '700';
            }
            else
            {
                $('#labelUpload').html(input.files.length + " Images Uploaded!");
                labelElem.style.background = changeBGColor;
                upCont.style.boxShadow = "1px 1px 5px 1px #097579";
                upCont.style.border = "none";
                upCont.style.borderRadius = "8px";
                labelElem.style.color = 'white';
                labelElem.border = "none";
                labelElem.style.fontWeight = '700';
            }

            
        }

    </script>

body
{
    margin:0;
    padding:0;
  font-family: 'Montserrat', sans-serif;
  color:#20629F!important;
   background-color:rgba(204, 230, 255, 0.76) !important;
   /* color:#20629F!important;*/
   /* color:white!important;*/
  /* background-color:rgb(204, 230, 255, 0.07) !important;*/
 /* background: rgb(242,242,242);
background: linear-gradient(90deg, rgba(242,242,242,1) 0%, rgba(9,71,121,0.6587009803921569) 0%, rgba(102,231,235,0.7763480392156863) 100%);*/
}

h1, h2, h3, h4, h5, h6
{
  font-weight: 600;
}

h4
{
 /* color:#061420!important;*/
 /* color:white!important;*/
 color:#093e79 !important;
  text-align: center; 
}

/*SIDE NAV MENU*/
#mySidenav
{
  position: fixed;
  z-index:6 !important;
}

#howToContainer {
  top: 2px;
 /* background-color: #2675BF;*/
  position: absolute;
  left: -615px;
  transition: 0.3s;
  padding: 3px 15px 3px 15px;
  width: 770px;
  text-decoration: none;
  color: white;
 /* border-radius: 0 5px 5px 0;*/
}

#howToContainer:hover {
  left: 0px;
  /*background-color: #339CFF;*/
}

#howToContainer .howToTitle
{
  position: absolute;
  z-index:-1;
  right:-0vh;
  font-size: 16px;
  /*background-color: #2675BF;*/
  background-color: white;
  border-radius: 0 10px 10px 0;
  width:50%;
}

#howToContainer .howToTitle span
{
  display: inline-block;
  vertical-align: middle;
  float:right;
  color:#2675BF;
}

#howToContainer .howToTitle span img
{
  width:40px;
  height:40px;
  margin-left:1em;
  background-color:#2675BF;
  border-radius:0px 10px 10px 0;
}

#howToContainer:hover .howToTitle{
  background-color: #339CFF;
}

#howToContainer:hover .howToTitle span
{
  color:white;
  font-weight: bold;
}

#howToContainer .howToText
{
  border: 1px solid rgba(51, 156, 255);
  border-radius:10px;
  background-color: white;
  width:600px;
  padding:1em 0.5em 0.5em 0.5em;

}

#howToContainer .howToText ol li
{
 font-size: 14px;
 color:#20629F!important;
}

#howToContainer:hover .howToText
{
  color:#061420!important;
  font-weight: 400;
  border:1px solid white;
 /* box-shadow: 0px 0px 10px 0px white;*/
 box-shadow: 0px 0px 0px 1px #2D89DF;
  /*box-shadow: 0px 0px 6px 0px #2D89DF;*/
}

 /*END OF SIDENAV MENU*/

.directoryInput
{
  text-indent:8px;
  font-size:14px !important;
 /* color:#0C253C!important;*/
 color:#20629F!important;
  font-weight: 400;
  height:100%;
}

.directoryInput::placeholder
{
  font-style:italic;
}

/*.directoryInput::focus DOESNT WORK!!!
{
  color:#061420!important;
    font-weight: 400;
    box-shadow: 0px 0px 0px 1px #2D89DF;
} */

.form-control:focus 
{
  /*border:2px solid rgb(38, 117, 191) !important;*/
  /*box-shadow: none!important;*/
  border:none!important;
  box-shadow: 0px 0px 0px 1px #2D89DF !important;
}

.searchBar::placeholder
{
   color:rgba(38, 117, 191, 0.65);
    font-size:13px;
}

.fa-search
{
  color:#2D89DF;
  position: absolute;
  float:right;
  right:1em;
  top:0.5em;
}

/*.form-control:focus .fa-search DOESNT WORK!!!
{
   color:#093579 !important;
}*/

/*Copy Button*/
.copy-btn1, .copy-btn2
{
    border:1px solid rgb(38, 117, 191);
    padding:7px 30px;
    margin-right:6px;
    border-radius:7px 7px 0px 0px;
    border-bottom:none;
    transform: translate3d(0, 28px, -1px);
    color:#2D89DF !important;
    transition:all .3s;
    z-index: -1;
  }

  .copy-btn-show{
    transform: translate3d(0, 0px, -1px);
  /*  box-shadow: 0px 0px 5px 0px #20629F;*/
    border:1px solid #2D89DF;
    border-bottom:none;
    /*background-color:#2D89DF;*/
    color:#2D89DF !important;
    z-index: -1;
    cursor:pointer;
    user-select: none;
    font-weight:800;
  }

  .copy-btn-show:hover
  {
    background-color:#2D89DF;
    color:white !important;
  }
/*END OF Copy Button*/


#genButton
{
   /*border: 1px solid rgb(19, 59, 96);*/
  /* background-color:white;*/
  background-color:#2D89DF;
  padding:0.5em 1em 0.5em 1em;
  text-align: center;
  /*color:rgb(19, 59, 96);*/
  color:white!important;
  font-weight: bold;
  font-size:15px;
}

#genButton:hover
{
  /* border: 1px solid rgb(19, 59, 96);*/
   background-color:rgb(19, 59, 96);
   color:white!important;
}

.inputTA
{
    display:inline-block;
    margin:3px 20px 0 20px;
}   


.inputTA2
{
  display:inline-block;
  margin:3px 20px 0 20px;
}   


.outputTAstyle, .outputTAstyle2{
border: 1px solid rgba(51, 156, 255);
    border-radius:5px;
    width:800px;
    height:500px;
    font-size:13px !important;
    color:#0C253C!important;
    margin:0 0;
    outline:none;
    padding:15px 15px;
    z-index: 99999;
    transform: translateZ(3px);
    transition: all .3s;
  }

  .outputTAstyle:focus , .outputTAstyle2:focus{
    /*box-shadow: 0px 0px 2px 0px #ffffff;
    border-color:white;*/
    cursor:default!important;
    /*color:#061420!important;*/
    /*border:1px solid white;*/
    color:#061420!important;
    font-weight: 400;
    /*border-color: #2D89DF;*/
    box-shadow: 0px 0px 0px 1px #2D89DF;
    /*font-weight: 500;*/
    /*border-color: #2D89DF;*/
    /*box-shadow: 0px 0px 10px 0px white;*/
      
  }

/*  .outputTAstyle2[readonly]
  {
    background-color:rgb(229, 243, 255) !important;
  }*/

  ::placeholder{
    color:rgba(38, 117, 191, 0.65);
    font-size:15px;
  }

  ::-webkit-scrollbar { 
    display: none; 
  }

/*
.footer
{
  color:#0D2740 !important;
  font-weight: 600;
}*/

<!-- Programmed by Christine Jane Kudera ¯\_( ͡❛ ͜ʖ͡❛ )_/¯ -->
<html>
<head>
    <title>Image Path Generator</title>

    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">

    <!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> <!-- for the material icons -->
    

</head>



<body>

<!-- HOW TO USE CONTAINER -->
<div id="mySidenav" class="sidenav">
              <a href="#" class="containerStyle" id="howToContainer" title="How to Use" alt="How to Use">
                <div class="howToTitle">
                    <span>How to Use<img src="https://media1.giphy.com/media/TIA4R33jmGPPis5KPv/giphy.gif"><!-- <img src="https://media3.giphy.com/media/9Daw0eNNSE0e9WM2lI/source.gif" style="width:40px;height:40px;"> -->
                    </span>
                </div>
                <div class="howToText">
                        <ol>
                            <li> <b>Upload/Choose the images</b> you wanted to generate a new image path. <i>(Can be more than 1)</i></li>
                            <li> Input the new path inside the <b>Path Input Form</b>.</li>
                            <li> Click the <b>Generate button</b>.</li>
                            <li> The Left Textarea contains the <b>filenames of the images with the path</b> while the Right Textarea contains the <b>filenames only</b>.</li>
                            <li> Copy the new image sources from the Left Textarea.</li>
                        </ol>
                </div>
              </a>

    </div>  

<center>

<h4 style="margin-top:1vh;">Image Path Generator</h4>
    
    <!-- UPLOAD FILES INPUT -->
    <div class="row" style="width:50%;">
        <!-- <small style="margin-top:0;padding-top:0;float:right;">No. of Images Uploaded:&nbsp;<span id="countImg" style="font-weight: 600;"></span> </small> -->
        <div class="input-group mb-3" id="uploadCont" style="z-index:1 !important;margin-top:0 !important;padding-top:0 !important;">
              <div class="input-group-prepend">
                    <span class="input-group-text"  style="font-size:14px;padding:0 1.5em;"><strong>Upload</strong></span>
              </div>
              <div class="custom-file">
                    <input type="file" class="custom-file-input" name="filesToUpload" id="filesToUpload" onchange="countImages('#2D89DF')" multiple="">
                    <label class="custom-file-label" id="labelUpload" for="filesToUpload" style="text-align:left;font-size:16px;font-weight: 500;color:#20629F!important;padding-left:20px;">Choose Images...</label>
              </div>
        </div>
    </div> <!-- end of row -->
    

    <!-- DIRECTORY INPUT FORM -->
    <div class="row" style="width:50%;">
            <!-- h5><strong>DIRECTORY:</strong></h5> -->
            <div class="input-group" style="margin-bottom:0 !important;padding-bottom:0 !important;">
                  <div class="input-group-prepend">
                    <span class="input-group-text" style="font-size:14px;padding:0 1.5em;"><strong>Path</strong></span>
                  </div>
                     <input type="text" class="form-control directoryInput" aria-label="directory" name="addText" id="addText" value="images/newImg/2020/08/"/>
                  <div class="input-group-append">
                    <button class="btn" id="genButton" onclick="makeFileList()">Generate</button>
                  </div>
            </div>
            <small style="margin-top:0;padding-top:0;"><strong>&nbsp;| e.g. |</strong> images/newImg/2020/08/</small>
    </div> <!-- end of row -->
    
    <ul id="fileList"></ul>

    <div class="inputTA output1">
        <p><strong style="color:#093579;margin-bottom:0;padding-bottom:0;line-height: 0;">New Path + Image Filename<small><b>(s)</b></small>:</strong></p>
        <p><small style="margin-top:0;padding-top:0;line-height: 0;margin-bottom:0;padding-bottom:0;"><strong>| e.g. |</strong> images/newImg/2020/08/image1.jpg</small></p>
        <div style="display: inline-block;vertical-align: middle;float:left;margin-left:1em;margin-top:0.5em;">
            <small style=""><strong>Img src:</strong>&nbsp;<span style="margin-top:0;padding-top:0;line-height: 0;" class="numbSrc1">0</span></small>
        </div>
        <div style="display: inline-block;vertical-align: middle;float:left;margin-left:3em;margin-top:0;position: relative;">
            <i class="fa fa-search" style=""></i>
            <input type="text" class="form-control searchBar" id="searchDir" style="width:500px;height:30px;border-radius:30px;font-size:13px;" placeholder="Search image here...">
        </div>
        <div class ="copy-holder">
                    <span class = "float-right copy-btn1" data-container="body" data-toggle="popover" data-placement="top" data-content="Copied to Clipboard!">Copy</span>
        </div>
        <textarea id="outputText" class="outputTAstyle"  placeholder="New Path + Image Filename(s) here..." readonly></textarea>
    </div>
      
   <div class="inputTA2 output2">
        <p><strong style="color:#093579;margin-bottom:0;padding-bottom:0;line-height: 0;">Image Filename<small><b>(s)</b></small> only:</strong></p>
        <p><small style="margin-top:0;padding-top:0;line-height: 0;margin-bottom:0;padding-bottom:0;"><strong>| e.g. |</strong> image1.jpg</small></p>
        <div style="display: inline-block;vertical-align: middle;float:left;margin-left:1em;margin-top:0.5em;">
            <small style=""><strong>Img src:</strong>&nbsp;<span style="margin-top:0;padding-top:0;line-height: 0;" class="numbSrc2">0</span></small>
        </div>
        <div style="display: inline-block;vertical-align: middle;float:left;margin-left:3em;margin-top:0;position: relative;">
            <i class="fa fa-search" style=""></i>
            <input type="text" class="form-control searchBar" id="searchFil" style="width:500px;height:30px;border-radius:30px;font-size:13px;" placeholder="Search image here...">
        </div>
        <div class ="copy-holder">
                    <span class = "float-right copy-btn2" data-container="body" data-toggle="popover" data-placement="top" data-content="Copied to Clipboard!">Copy</span>
        </div>
        <textarea id="filenameText" class="outputTAstyle2"   placeholder="Image Filename(s) only here..." readonly></textarea>
    </div>


</center>   
</body>

</html>