javascript jquery html function jsfiddle

jQuery function works on JSFiddle but doesn't work in my html document

I have a function that adds x px of margin-left to "Karusell" which is a div-box. I also have a function that adds "1" to nextClicked every time we use the first function. When nextClicked is 2, there should not be any margin added when clicked on the first function. This works perfectly fine in JSFiddle, but doesn't work in my HTML document and I don't know why.

body {
    background-color: #e0e0e0;
    position: relative;
}

#bokse1 {
    width: 100px;
    height: 100px;
    background-color: blue;
}

#bokse2 {
    width: 100px;
    height: 100px;
    background-color: red;
}

#Karusell {
    width: 1040px;
    height: 300px;
    background-color: indigo;
    display: absolute;
}

<head>
    <link rel="stylesheet" href="css.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>


<body>

    <div id="bokse1"></div>
    <div id="bokse2"></div>

    <div id="Karusell"></div>

    <script>
        currentNextClicked = 0;

        nextClicked = 0;

        $(document).ready(function () {

            $("#bokse1").click(function () {
                if (nextClicked != 2)
                    $("#Karusell").animate({
                        marginLeft: ["+=100px", "linear"],
                    }, 400, function () {});
            });

            $('#bokse1').live('click', function () {
                if (nextClicked != 2) {
                    currentNextClicked = nextClicked;
                    nextClicked = currentNextClicked + 1;
                    console.log(nextClicked)
                }
            });

        });
    </script>

</body>

here is the JSFiddle: http://jsfiddle.net/vbLjcpx1/11/

As we can see in the JSFiddle link, no margin is being added the second time we use the function, and this should also happen in my HTML document.

Solution

currentNextClicked = 0;

nextClicked = 0;

$(document).ready(function() {

  $("#bokse1").click(function() {
  if (nextClicked != 2)
$("#Karusell").animate({
  marginLeft: ["+=100px", "linear"],
}, 400, function() {
});
});

  $('#bokse1').on('click', function(){
      if (nextClicked != 2) {
      currentNextClicked = nextClicked;
      nextClicked = currentNextClicked + 1;
      console.log(nextClicked)
  }});

});

.nextButtonFalse{display:none;}
.prevButtonFalse{display:none;}

#bokse1 {width:20px;height:20px;background-color:blue;}
#bokse2 {width:20px;height:20px;background-color:red;}
#Karusell{width:30px;height:30px;background-color:indigo;display:absolute;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="bokse1"></div>
<div id="bokse2"></div>

<div id="Karusell">

jQuery - how to use the “on()” method instead of “live()”?

.live is deprecated since jquery 1.9 use .on instead for the versions after 1.8