Detect mouse clicks on image and store them in a database

I want to detect my mouse clicks on an image and store all the click points in a database file. I tried it but i can only retrieve the last click instead of all the clicks in a session. my code for mouse clicks goes like this:

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
    <script>
      $(document).ready(function() 
      {
        $('img').click(function(f) 
        {
          var offset = $(this).offset();
          var X = (f.pageX-offset.left);
          var Y = (f.pageY-offset.top);
          var X1=[X];
          var Y1=[Y];
          $('#display').text('X: ' + X1 + ', Y: ' + Y1);
        });
      });
   </script>
  </head>
  <body>
    <img style="width:500px;"src="mouseclick.png"/>   
    <div id="display">
    </div>
  </body>
</html>

Solution

By doing this you can save all the clicks on every ajax call.

$(document).ready(function() {
  $('img').click(function(e) {
    var offset = $(this).offset();
    var xPoint = e.pageX - offset.left;
    var yPoint = e.pageY - offset.top;
    alert(e.pageX - offset.left);
    alert(e.pageY - offset.top);
    $.ajax({
      url: "where you want to go example: /Admin/SavePoints",
      type:"POST",
      data:{xAxis:xPoint,yAxis:yPoint },
      success: function(data){
       alert("Saved");   
      }
      error: function(){
        alert("ERROR");
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

Updated Fiddle:

$(document).ready(function() {
    var arrayOfXY = new Array();
    $('img').click(function(e) {
        var offset = $(this).offset();
        var xPoint = e.pageX - offset.left;
        var yPoint = e.pageY - offset.top;
        arrayOfXY.push({x:xPoint, y:yPoint});
    });
  
    $(".showCoordinates").on("click",function() {
        for (var i = 0; i < arrayOfXY.length; i++) {
            var x = arrayOfXY[i].x;
            var y = arrayOfXY[i].y;
            alert("x axis:"+x+" and y axis:"+y);
            console.log("x axis:"+x+" and y axis:"+y);
        }
    });
  
    $(".saveCoordinates").on("click",function() {
        $.ajax({
            url: "Ur url",
            type:"POST",
            data: {coordinates:arrayOfXY},
            success:function(data){
              alert("Success");
            },
            error: function(){
              alert("ERROR");
            }
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
<button class="showCoordinates">Show saved coordinates</button>
<button class="saveCoordinates">Save coordinates in DB</button>