<div class="image-wrapper" style="border:2px solid #999; width: 600px;">
  <img src="https://asdfresearch.com.au/images/GRID.jpg" style="border:0 none; width: 100%; height: auto;" /></div>
<script type="text/javascript" charset="utf-8">    
  $(document).ready(function() {  
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Hide the text input - uncomment below
    //$('input.text', thisQuestion).hide();
 
    // Create the click "marker"
    $('.image-wrapper', thisQuestion).append('<div class="click-marker" />');
    var leftVal = 0;
    var topVal = 0;
    var displayVal = 'none';
    if($.trim($('input.text', thisQuestion).val()) != '') {
      leftVal = $.trim($('input.text', thisQuestion).val()).split(',')[0]+'%';
      topVal = $.trim($('input.text', thisQuestion).val()).split(',')[1]+'%'; 
      displayVal = 'block';
    }
    $('.click-marker', thisQuestion).css({
      'display': displayVal,
      'position': 'absolute',
      'left': leftVal,
      'top': topVal,
      'margin': '-10px 0 0 -10px',
      'width': '18px',
      'height': '18px',
      '-moz-border-radius': '10px',
      '-webkit-border-radius': '10px',
      'border-radius': '10px',
      'background': '#0C0',
      'border': '1px solid #090'
    });
 
    // Insert an overlay to click on
    $('.image-wrapper', thisQuestion).css('position', 'relative').append('<div class="click-overlay" />');
    $('.click-overlay', thisQuestion).css({
      'position': 'absolute',
      'left': 0,
      'top': 0,
      'margin': 0,
      'width': $('.image-wrapper', thisQuestion).width()+'px',
      'height': $('.image-wrapper', thisQuestion).height()+'px'
    });
 
    // Click event on the overlay
    $('.click-overlay', thisQuestion).click(function(e) {
      var thisWidth = $(this).width();
      var thisHeight = $(this).height();
      var posX = $(this).offset().left;
      var posY = $(this).offset().top;
      var xCoord = e.pageX - posX;
      var yCoord = e.pageY - posY;
      var xCoordPercent = (xCoord/thisWidth)*100;
      var yCoordPercent = (yCoord/thisHeight)*100;
 
      // Load the click coordinates (as relative percentages)
      $('input.text', thisQuestion).val(xCoordPercent.toFixed(2)+','+yCoordPercent.toFixed(2));
 
      // Reposition the marker
      $('.click-marker', thisQuestion).css({
        'display': 'block',
        'left': xCoordPercent+'%',
        'top': yCoordPercent+'%'
      });
    });
 
  });
</script>

$(document).on('ready pjax:scriptcomplete',function(){
  $('.image-click-position').imageClickPosition({
    hideInputs: false // To hide inputs, set to true
  });
});
 
//@name      | imageClickPosition
//@author    | Tony Partner - http:partnersurveys.com
//@updated_at  | 23/06/2018 08:00:00
//@description  | A plugin to record click positions on an image
 
(function( $ ){
 
  $.fn.imageClickPosition = function(options) {
 
    var opts = $.extend( {
      hideInputs: true
    }, options);
 
    return this.each(function() {
      var thisQuestion = $(this);
 
      // Hide the text input
      if(opts.hideInputs == true) {
        $('.subquestion-list', thisQuestion).hide();
      }
 
      // Click event on the image
      $('.image-wrapper', thisQuestion).on('click', function(event) {
 
        event.stopPropagation();
 
        if($('.click-marker', thisQuestion).length == $('input[type="text"]', thisQuestion).length) {
          $('.click-marker:last', thisQuestion).remove();
        }
 
        var thisWidth = $(this).width();
        var thisHeight = $(this).height();
        var posX = $(this).offset().left;
        var posY = $(this).offset().top;
        var xCoord = event.pageX - posX;
        var yCoord = event.pageY - posY;
        var xCoordPercent = (xCoord/thisWidth)*100;
        var yCoordPercent = (yCoord/thisHeight)*100;
 
        // Insert a marker
        $('.image-wrapper', thisQuestion).append('<div class="click-marker" style="left:'+xCoordPercent.toFixed(2)+'%; top:'+yCoordPercent.toFixed(2)+'%;" data-left="'+xCoordPercent.toFixed(2)+'" data-top="'+yCoordPercent.toFixed(2)+'" />');
 
        loadInputs();
      });
 
      // Click event on a click-marker
      $('.image-wrapper', thisQuestion).on('click', '.click-marker', function(event) {
        event.stopPropagation();
        $(this).remove();
 
        loadInputs();
      });
 
      function loadInputs() {
 
        $('input[type="text"]', thisQuestion).val('');
 
        $('.click-marker', thisQuestion).each(function(i) {
          $('input[type="text"]:eq('+i+')', thisQuestion).val($(this).attr('data-left')+','+$(this).attr('data-top'));
        });
 
        $('input[type="text"]', thisQuestion).trigger('keyup');
      }
 
      // Initial states
      $('input[type="text"]', thisQuestion).each(function(i) {
 
        if($.trim($(this).val()) != '') {
          var leftVal = $.trim($(this).val()).split(',')[0];
          var topVal = $.trim($(this).val()).split(',')[1]; 
 
          $('.image-wrapper', thisQuestion).append('<div class="click-marker" style="left:'+leftVal+'%; top:'+topVal+'%;" data-left="'+leftVal+'" data-top="'+topVal+'" />');
        }
      });
 
    });
  };
})( jQuery );

.image-click-position .image-wrapper {
  position: relative;
  border: 1px solid #999999;
  width: 600px;
  max-width: 100%;
  cursor: pointer;
}
 
.image-click-position .click-marker {
  display: block;
  position: absolute;
  margin: -10px 0 0 -10px;
  width: 18px;
  height: 18px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #0C0;
  border: 1px solid #090;
}