jQuery close button not working

Question

I have gone through numerous threads on this site and none of the codes I have found are working for me. I have 3 popups that I would like to close (See below for an example). I have ran out of ideas to why none of the jQuery codes I found are working.

Actually also on a side note why is a script working in the html but not in my .js file (also seen in the example below)?

I would be most grateful if you could help me out on this matter, many thanks for your time.

$("#close").on('click', function() {
   $("#id1").fadeOut();
 });

.abt-right {
    float: right;
    display: inline-block;
}

#id1, #id2, #id3 {
    display:none;
}

.abt-btn1, .abt-btn2, .abt-btn3 {
    position: relative;
    right: 10%;
    top: 100px;
    width: 500px;
    height: 90px;
    color: white;
    margin-bottom: 30px;
}

.abt-btn1 {
    background-color: black;
    color: white;
}

.abt-btn2 {
    background-color: grey;
    color: white;
}

.abt-btn3 {
    background-color: black;
    color: white;
}

#abt-content1, #abt-content2, #abt-content3 {
    position: absolute;
    padding-right: 10px;
    padding-top: 20px;
    right: 100px;
    bottom: 50px;
    width:100%;
    height: 100px;
    z-index: 999;
}

#abt-content1 {
    color: black;
    background-color: red;
}

#abt-content2 {
    color: black;
    background-color: blue;
}

#abt-content3 {
    color: black;
    background-color: green;
}

#close {
    position: absolute;
    right:0;
    top:0;
    padding:2px 5px;
    background:#ccc;
}

<div class="container-fluid wow fadeInLeft" id="about-sec"> 
            <div class="back2">
            
<script type="text/javascript">
function show(elementId) { 
 document.getElementById("id1").style.display="none";
 document.getElementById("id2").style.display="none";
 document.getElementById("id3").style.display="none";
 document.getElementById(elementId).style.display="block";
}

</script>
                <div class="abt-right">
                    <div class="abt-btn1" onclick="show('id1');">Job Experience</div>
                    <div class="abt-btn2" onclick="show('id2');">Education</div>
                    <div class="abt-btn3" onclick="show('id3');">Timeline</div>
                    
                    <div id="id1">                       
                        <div class="abt-content" id="abt-content1"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
<span id="close">×</span> 
</div>                      
                    </div>
                    <div id="id2">                    
 <div class="abt-content" id="abt-content2"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
<span id="close">×</span> 
</div>                    
                    </div>
                    <div id="id3">
                     <div class="abt-content" id="abt-content3"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
<span id="close">×</span>
</div>                     
                    </div>

Answer 1

Here is a plunker, be sure to enclose your event handler in a $(doument).ready(function){}); Also be sure to that IDs should be unique that way it works properly

http://plnkr.co/edit/He0ZmnJ4c72aQA9ggsl6?p=preview

javascript

$(document).ready(function() {
  $("#close1").on('click', function() {
    $("#id1").fadeOut();
  });
  $("#close2").on('click', function() {
    $("#id2").fadeOut();
  });
  $("#close3").on('click', function() {
    $("#id3").fadeOut();
  });
});

function show(elementId) {
    document.getElementById("id1").style.display = "none";
    document.getElementById("id2").style.display = "none";
    document.getElementById("id3").style.display = "none";
    document.getElementById(elementId).style.display = "block";
}

Html

<body>
<h1>Hello Plunker!</h1>

<div class="container-fluid wow fadeInLeft" id="about-sec">
<div class="back2">
  <div class="abt-right">
    <div class="abt-btn1" onclick="show('id1');">Job Experience</div>
    <div class="abt-btn2" onclick="show('id2');">Education</div>
    <div class="abt-btn3" onclick="show('id3');">Timeline</div>

    <div id="id1">
      <div class="abt-content" id="abt-content1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
        <span id="close1">×</span>
      </div>
    </div>
    <div id="id2">
      <div class="abt-content" id="abt-content2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
        <span id="close2">×</span>
      </div>
    </div>
    <div id="id3">
      <div class="abt-content" id="abt-content3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
        <span id="close3">×</span>
      </div>
    </div>
  </div>
  </div>
  </div>
  </body>

Answer 2

you need to include jQuery if you want to use it.

you can download it here: https://jquery.com/

or just add a script tag and load if from google servers

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

Hope this helps