title: How do I make these 3 very similar functions shorter
body: <blockquote>
    <p>Hello so today I was curios how would I code smarter and shorter. here is litle project I did like 2 weeks ago: </p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> // Get input element
      let filterInput = document.getElementById('filterInput');
      // Add event listener
      filterInput.addEventListener('keyup', filterNames);
  
      function filterNames(){
        // Get value of input
        let filterValue = document.getElementById('filterInput').value.toUpperCase();
  
        // Get names ul
        let ul = document.getElementById('names');
        // Get lis from ul
        let li = ul.querySelectorAll('li.collection-item');
  
        // Loop through collection-item lis
        for(let i = 0;i &lt; li.length;i++){
          let a = li[i].getElementsByTagName('a')[0];
          // If matched
          if(a.innerHTML.toUpperCase().indexOf(filterValue) &gt; -1){
            li[i].style.display = '';
          } else {
            li[i].style.display = 'none';
          }
        }
  
      }
  
      function do1(){
        var input = document.getElementById('ipt1').value;
        var a = document.createElement('a');
            a.setAttribute('href', '#');
            a.textContent = input;
        var li = document.createElement('li');
          li.setAttribute('class', 'collection-item');
            a.onclick=function(){
              var div = this.parentElement;
              div.style.display = "none";
        }
        var div = document.getElementById('div1');
          li.appendChild(a);
          div1.appendChild(li)
          if(input===""){
            alert('please fill in information');
            return false;
          }
    
      }
  
      function do2(){
        var input = document.getElementById('ipt2').value;
        var a = document.createElement('a');
        a.setAttribute('href', '#');
        a.textContent = input;
        var li = document.createElement('li');
        li.setAttribute('class', 'collection-item');
        a.onclick=function(){
          var div = this.parentElement;
          div.style.display = "none";
        }
        var div = document.getElementById('div2');
        li.appendChild(a);
        div2.appendChild(li);
      
      }
  
       function do3(){
        var input = document.getElementById('ipt3').value;
        var a = document.createElement('a');
        a.setAttribute('href', '#');
        a.textContent = input;
        var li = document.createElement('li');
        li.setAttribute('class', 'collection-item');
        a.onclick=function(){
          var div = this.parentElement;
          div.style.display = "none";
        }
        var div = document.getElementById('div3');
        li.appendChild(a);
        div3.appendChild(li);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.css"&gt;
    &lt;title&gt;My Contacts&lt;/title&gt;
  &lt;/head&gt;
  &lt;div class="container"&gt;
      &lt;h1 class="center-align"&gt;
        My Contacts
      &lt;/h1&gt;
      &lt;input type="text" id="filterInput" placeholder="Search names..."&gt;
      &lt;ul id="names" class="collection with-header"&gt;
        &lt;li class="collection-header"&gt;
          &lt;h5&gt;A&lt;/h5&gt; &lt;input class="ipt" type="box" id="ipt1"&gt;&lt;button onclick="do1();"&gt;click me to add another name&lt;/button&gt;
        &lt;/li&gt;
     &lt;div id="div1"&gt;   
      
     &lt;/div&gt;  
        &lt;li class="collection-header"&gt;
          &lt;h5&gt;B&lt;/h5&gt; &lt;input class="ipt" type="box" id="ipt2"&gt;&lt;button onclick="do2();"&gt; click me to add another name&lt;/button&gt;
        &lt;/li&gt;
      &lt;div id="div2"&gt;  
  
       &lt;/div&gt; 
        &lt;li class="collection-header"&gt;
          &lt;h5&gt;C&lt;/h5&gt; &lt;input class="ipt" type="box" id="ipt3"&gt;&lt;button onclick="do3();"&gt; click me to add another name&lt;/button&gt;
        &lt;/li&gt;
      &lt;div id="div3"&gt;  
       &lt;/div&gt;
      &lt;/ul&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <p>So as you can see there are 3 functions that are literally same but just have diffrent id's and that kind of stuff. How do I shorten these 3 function is there any way? I searched little bit about prototype, because I've heard that prototypes have something to do with shortening code and making it easier to understand and much more shorter. So if you have any ideas please leave a comment I would appreaciate it. And one more question: should I start learning javascript OOP. I don't really know if it's important to learn or not? </p>
  </blockquote>