Adding a button to a moving/dragged background HTML/CSS/JS

Question

I made a draggable background which is working fine. I also need to add buttons to it. I need the buttons to move with the background accordingly (it is a map with some places).

Right now I have a draggable background and buttons on it, but the buttons are not moving with it. How can I do that? I tried to search in the internet but found nothing useful. Please help.

// When the user clicks on div, open the popup
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}

$(document).ready(function() {
  var $bg = $('.bg-img'),
    data = $('#data')[0],
    elbounds = {
      w: parseInt($bg.width()),
      h: parseInt($bg.height())
    },
    bounds = {
      w: 4000 - elbounds.w,
      h: 3000 - elbounds.h
    },
    origin = {
      x: 0,
      y: 0
    },
    start = {
      x: 0,
      y: 0
    },
    movecontinue = false;

  function move(e) {
    var inbounds = {
        x: false,
        y: false
      },
      offset = {
        x: start.x - (origin.x - e.clientX),
        y: start.y - (origin.y - e.clientY)
      };

    data.value = 'X: ' + offset.x + ', Y: ' + offset.y;

    inbounds.x = (offset.x * -1) < bounds.w;
    inbounds.y = (offset.y * -1) < bounds.h;

    if (movecontinue && inbounds.x && inbounds.y) {
      start.x = offset.x;
      start.y = offset.y;

      $(this).css('background-position', start.x + 'px ' + start.y + 'px');
    }

    origin.x = e.clientX;
    origin.y = e.clientY;

    e.stopPropagation();
    return false;
  }

  function handle(e) {
    movecontinue = false;
    $bg.unbind('mousemove', move);

    if (e.type == 'mousedown') {
      origin.x = e.clientX;
      origin.y = e.clientY;
      movecontinue = true;
      $bg.bind('mousemove', move);
    } else {
      $(document.body).focus();
    }

    e.stopPropagation();
    return false;
  }

  function reset() {
    start = {
      x: 0,
      y: 0
    };
    $(this).css('backgroundPosition', '0 0');
  }

  $bg.bind('mousedown mouseup mouseleave', handle);
  $bg.bind('dblclick', reset);
});

div.bg-img {
  background-image: url("https://map.snapchat.com/static/sharepreview.jpg");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-color: white;
  border: 1px solid #aaa;
  width: 1900px;
  height: 800px;
  margin: 25px auto;
}

p,
#data {
  text-align: center;
}

#data {
  background: black;
  font-weight: bold;
  color: white;
  padding: 5px;
  font-size: 1.4em;
  border: 1px solid #fff;
}

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.popup .popuptext {
  visibility: hidden;
  width: 500px;
  height: 400px;
  //background-color: #555;
  background-image: url("mostpeople.jpg");
  color: #000;
  text-align: left;
  border-radius: 20px;
  padding: 20px;
  z-index: 1;
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  margin-left: -80px;
}


/* Popup arrow 
    .popup .popuptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
      
    }
    
      /* Toggle this class - hide and show the popup */

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}


/* Add animation (fade in the popup) */

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* ------------------------------------------------popup*/

body {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 15px;
  color: #000;
  text-transform: uppercase;
  overflow-x: hidden;
}

h1 {
  font-size: 80px;
  text-align: right;
  position: bottom;
  right: 340px;
  top: 300px;
  font-weight: normal;
}

button {
  background-color: #FF0000;
  /* red */
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 6px;
  margin: 1px 1px;
  cursor: pointer;
  float: right;
}

.button1 {
  border-radius: 100%;
  position: absolute;
  left: 300px;
  top: 500px;
}


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="bg-img">
  <div class="popup" onclick="myFunction()"><button class="button button1"></button>

    <span class="popuptext" id="myPopup">text of popup;</span>
  </div>
</div>
<p>
  <input type="text" id="data" />
</p>

Answer 1

After this line:

$(this).css('background-position', start.x + 'px ' + start.y + 'px');

Add this:

  let buttonStartLeft = 300;
  let buttonStartRight = 500;
  $('.button1').css('left', (buttonStartLeft + start.x) + 'px');
  $('.button1').css('top', (buttonStartRight + start.y) + 'px');

The two variables are just copies of the css positions you gave the button to start with, and the rest just moves the button around the same as your background movements.