js is targetting 2 times the same image while giving them both different id's

function activate() {


//rotating energy cable1
    var el = document.getElementById("target");
    var st = window.getComputedStyle(el, null);
    var tr = st.getPropertyValue("-webkit-transform") ||
        st.getPropertyValue("-moz-transform") ||
        st.getPropertyValue("-ms-transform") ||
        st.getPropertyValue("-o-transform") ||
        st.getPropertyValue("transform") ||
        "FAIL";

    var values = tr.split('(')[1].split(')')[0].split(',');
    var a = values[0];
    var b = values[1];
    var c = values[2];
    var d = values[3];

    var scale = Math.sqrt(a*a + b*b);

    var sin = b/scale;

    var angle = Math.round(Math.asin(sin) * (180/Math.PI));

    console.log('Rotate: ' + angle + 'deg');







    //rotating energy cable 2

    var el2 = document.getElementById("target2");
    var st2 = window.getComputedStyle(el2, null);
    var tr2 = st2.getPropertyValue("-webkit-transform") ||
        st2.getPropertyValue("-moz-transform") ||
        st2.getPropertyValue("-ms-transform") ||
        st2.getPropertyValue("-o-transform") ||
        st2.getPropertyValue("transform") ||
        "FAIL";




    var values2 = tr2.split('(')[1].split(')')[0].split(',');
    var a2 = values[0];
    var b2 = values[1];
    var c2 = values[2];
    var d2 = values[3];

    var scale2 = Math.sqrt(a2*a2 + b2*b2);


    var sin2 = b2/scale2;
    var angle2 = Math.round(Math.asin(sin2) * (180/Math.PI));
    console.log('Rotate: ' + angle2 + 'deg');


















//seeing if the power cables are well rotated, if it's true then do something
    if ((angle > -9 && angle < 10) && (angle2 > -9 && angle2 < 10)){
           alert('its shining!');
       }
       else{
            alert('you suck');
        }
}

@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');
*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}
body{
    background-color: #F7F7F7;
}
#border-buiten-tekst1 {
    font-family: 'Raleway', sans-serif;
    margin-left: 32.5vw;
    margin-top: -3vw;
    border: solid;
    position: absolute;
}
#flex-container-pijlen {
    position: absolute;
    display: flex;
    margin-left: 30vw;
    margin-top: -3.2vw;
}
#pijl-links {
    width: 3.5vw;

}
#pijl-rechts {
    width: 3.5vw;
    margin-left: 15vw;
    margin-left: 22vw;
}
#gloeilamp {
    margin-left: 65vw;
    max-width: 5vw;
    max-height: 5vw;
    position: absolute;

}

#target2 {
    margin-left: 12.7vw;
    margin-top: 9.6vw;
    position: absolute;
    -webkit-transform: rotate(269deg);
    -moz-transform: rotate(269deg);
    -ms-transform: rotate(269deg);
    -o-transform: rotate(269deg);


}
#zetaan-knop {
    position: absolute;
    font-size: 1.3vw;
    margin-left: -31vw;
    margin-top: 23vw;
}
#target {
    margin-left: 38.2vw;
    margin-top: 15.75vw;
    position: relative;
    -webkit-transform: rotate(269deg);
    -moz-transform: rotate(269deg);
    -ms-transform: rotate(269deg);
    -o-transform: rotate(269deg);
}
#border-buiten-tekst2 {
    font-family: 'Raleway', sans-serif;
    margin-left: 34.4vw;
    margin-top: 4vw;
    padding-top: .2vw;
    text-align: center;
    width: 20vw;
    border-left: solid;
    border-right: solid;
    border-bottom: solid;
}

.menu-area li a{
    text-decoration: none;
    color: #F7F7F7;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    padding: 0px 25px;
    font-size: 14px;
    line-height: 30px;
    position: relative;
    z-index: 1;
}
.menu-area li{
    list-style: none;
    display: inline-block;
}
.custom-padding{

    padding-top: 20%;
}
nav{
    position: relative;
    padding: 10px 20px 10px 10px;
    text-align: center;
    z-index: 1;
    background: #8CC63E;
    margin: 0 auto;
    width: calc(100% - 60px);
    margin-top: 30px;
}
#border-spel {
    background-image: url("../img/speelveld.png");
    position: absolute;
    margin-left: calc(42vw - 600px);
    margin-top: .5vw;
    width:1320px !important;
    height: 36vw;
}
#border-buiten {
    margin-left: calc( 30vw -  450px );
    margin-top: 4.4vw;
    width: 1650px;
    height: 41vw;
    background-color: #8CC63E;
}
.logo{
    width: 20vh;
    float: left;
    margin-top: -30px;
    margin-left: 10px;
}

.menu-area li a:hover{
    background: #432064;
    color: #F7F7F7;
}
nav:before{
    position: absolute;
    content: '';
    left: 0;
    top: 100%;
    border-top:10px solid #333333;
    border-right:10px solid #333333;
    border-left: 10px solid transparent;
    border-bottom:10px solid transparent;
}

nav:after{
    position: absolute;
    content: '';
    left: 0;
    top: 100%;
    border-top:10px solid #333333;
    border-right:10px solid #333333;
    border-left: 10px solid transparent;
    border-bottom:10px solid transparent;
}

.menu-area h2{
    color:#F7F7F7;
}


.dropdown {
    float: right;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    background-color: inherit;
    font-family: inherit;
    margin-left: 50px;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #432064;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;

}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Stagair local spot">
    <meta name="keywords" content="Technolab, Stagairs, Workshops">
    <meta name="author" content="Ravi Breugom, Alexander Wallaard, Natascha van Baal">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="CSS/style.css" rel="stylesheet" type="text/css">
    <title>Technolab Stagairspot</title>
</head>
<body data-gr-c-s-loaded="true">
<header>
    <div class="custom=padding">
        <nav>
            <a href="../../beveiligd.php"><img class="logo"
                                               src="../../img/WhatsApp%20Image%202018-09-20%20at%2010.44.00.jpeg"
                                               alt="Logo"></a>
            <ul class="menu-area">
                <li><a href="#">Workshops</a></li>
                <li><a href="#">Agenda</a></li>
                <li><a href="#">Leerdoelen</a></li>
                <li><a href="../../Contact/Contact.php">Contact</a></li>
                <div class="dropdown">
                    <li><a class="dropbtn">&#9881;
                            <i class="fa fa-caret-down"></i>
                        </a></li>
                    <div class="dropdown-content">
                        <a href='../../uitloggen.php'>Uitloggen</a>
                        <a><?php

                            session_start();
                            if ($_SESSION['ingelogd'] == "ja") {
                                echo $_SESSION['username'] . "<br>";

                            } else {
                                header("Location: ../../login_form.php");
                            }

                            ?></a>
                    </div>
                </div>


    </div>

</header>
<div id="border-buiten">
    <h1 id="border-buiten-tekst1">Stroom Geeft energy game.</h1>
    <p id="border-buiten-tekst2">het doel van dit spel is om het lampje van stroom te vorzien! lukt het jouw om het
        lampje te laten branden?</p>
    <section id="flex-container-pijlen">
        <img id="pijl-links" alt="pijl-links" src="img/pijl-links.png">
        <img id="pijl-rechts" alt="pijl-rechts" src="img/pijl-rechts.png">
    </section>

    <canvas id="border-spel">


    </canvas>

    <!--spel plaatjes-->
    <div id="gloeilamp">
        <img src="img/gloeilamp-uit.png"/>
        <img src="img/gloeilamp-aan.jpg" style="display:none;"/>
    </div>
    <img id="target" src="img/schakkelaar.png"/>
    <script src="./bl.ocks.org_files/rotate.js.download"></script>
    <img id="target2" src="img/schakkelaar.png"/>
    <script src="./bl.ocks.org_files/rotate2.js.download"></script>
    <button id="zetaan-knop" onclick="activate()">zet aan</button>
    <script src="js/js.js"></script>


    <footer id="copyright">&copy; Technolab Leiden</footer>


</body>
</html>

hi everyone, i am making a simple js game. I have some trouble with the js code. it checks the first power cable 'if the rotation is between -9 and 10 degrees then do something' and that works well, but when i want to do it for the second power cable then it looks like it takes the rotation info of the first power cable. i was looking with console.log for the problem, the first power cable works well and if i rotate the second power cable it will still give the rotation info of the first power cable. I included a photo of the game so you have a idea about the game, sorry if the code is messy but i always make it nice when i am done with coding here's a photo of the game so you get a idea what the goal is