JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainWrapper">
  <section class="panel" id="panel-1"></section>
  <section class="panel" id="panel-2"></section>
  <section class="panel" id="panel-3"></section>
  <section class="panel" id="panel-4"></section>
</div>

CSS

html, body,.mainWrapper, .panel {
  position: relative;
  height: 100%;
    width:100%;
}

.mainWrapper {
  top: 0;
  left: 0;
    white-space:nowrap;
}

.panel {
  display: inline-block;
  background: rgba(255, 255, 255, 1);
    white-space:normal;
    border:solid
}

JavaScript

$(document).ready(function() {
  var $panelWrapper = $('.mainWrapper');
  var $panels = $('.mainWrapper').find('.panel');
  var $panelScrollPos = new Array();

  $panels.each(function(i) {
    //This is where I need help. It's not working
    $panelScrollPos[i] = Math.round($(this).offset().left - $panelWrapper.offset().left);

    alert('Panels position are: ' +  $panelScrollPos[i]);
  });
});