zer00ne

$(function() {
  var config = new Map([
    ['mentor', null],
    ['profile', null],
    ['image', null],
    ['package', null],
    ['payment', 0],
    ['url', null]
  ]);

  function view(config) {
    for (let [key, value] of config) {
      if (key === undefined) {
        break;
      }
      console.log(`${key}: ${value}`);
    }
  }

  $('.mentor').on('click', function(e) {
    $('.mentor').each(function() {
      $(this).addClass('disabled');
    });
    $(this).removeClass('disabled');

    var mentor = $(this).data('mentor');
    var profile = $(this).data('profile');
    var image = $(this).data('image');
    config.set('mentor', mentor);
    config.set('profile', profile);
    config.set('image', image);

    $('.image img').attr('src', $(this).data('image'));
    $('.packages').removeClass('disabled');
    $('.final').removeClass('disabled');
    console.log(view(config))
  });

  $('.package').on('click', function() {
    $('.package').each(function() {
      $(this).removeClass('active');
    });
    $(this).toggleClass('active');

    var package = $(this).data('package');
    var payment = parseFloat($(this).val());
    var url = $(this).data('url');
    config.set('package', package);
    config.set('payment', payment);
    config.set('url', url);

    $('#total').val(`$${payment.toFixed(2)}`);
    $('.summary').attr('href', `${config.get('url')}${config.get('profile')}`);
    console.log(view(config));
  });

});

html,
body {
  height: 100%;
  width: 100%;
  font: 400 16px/1.25 Consolas;
}

fieldset {
  width: fit-content;
  border-radius: 6px
}

.mentors {
  display: table;
}

.mentors button.button.mentor {
  display: table-cell;
}

figure.image {
  display: block;
  margin: 0 auto;
}

.image img {
  width: 90px;
  min-height: 90px;
  display: block;
  margin: 0 auto;
  border: 3px inset grey
}

.button {
  display: inline-block;
  border: 1px solid green;
  margin: 5px 2.5px;
  padding: 3px 5px;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  background: none;
}

.active {
  background: black;
  color: white;
}

.disabled {
  opacity: 0.4;
  cursor: default;
}

.summary {
  text-align: center;
}

#total {
  width: 118px;
  display: inline-block;
}

label {
  display: inline-block;
  margin-left: 20px;
}

.as-console-wrapper {
  width: 200px;
  min-height: 100%;
  margin-left: 65%;
}

.as-console-row.as-console-row::after {
  content: '';
  padding: 0;
  margin: 0;
  border: 0;
  width: 0;
}

<fieldset class='mentors'>
  <legend>Pick a Mentor</legend>
  <button class="mentor button" data-mentor="john-smith" data-profile='#John%20Smith' data-image='https://www.eikonphoto.com/wp-content/uploads/2017/03/male-headshot-e1515783468636.jpg'>John Smith</button>
  <button class="mentor button" data-mentor="jane-doe" data-profile='#Jane%20Doe' data-image='https://www.eikonphoto.com/wp-content/uploads/2016/07/professional-headshots-in-washington-dc-e1473098078630.jpg'>Jane Doe</button>
  <figure class='image'>
    <img src='https://www.computerhope.com/jargon/b/black.jpg' width='90px' height='90px'>
  </figure>
</fieldset>

<fieldset class='packages disabled'>
  <legend>Select Courses</legend>
  <button class="package button" data-package="express" data-url='https://example.com/exp.html' value='19.99'>Express</button>
  <button class="package button" data-package="growth" data-url='https://example.com/grw.html' value='29.99'>Growth</button>
  <button class="package button" data-package="mentor" data-url='https://example.com/mtr.html' value='49.99'>Mentor</button>
  <button class="package button" data-package="advanced" data-url='https://example.com/adv.html' value='74.99'>Advanced</button>
</fieldset>

<fieldset class='final disabled'>
  <a href='#/' class="summary button">Proceed<br>to<br>Payment</a>
  <label>Total: </label>
  <output id='total'></output>
</fieldset>

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

$('#test1 img').before('<span>123123</span>');

$('<span>123123</span>').insertBefore('#test2 img');

$('#test3').prepend('<span>123123</span>');

$('<span>123123</span>').prependTo('#test4');

document.querySelector('#test5 img').before(document.createElement('SPAN').textContent = '123123');

var span = document.createElement('SPAN');
span.textContent = '123123';
document.querySelector('#test6').insertBefore(span, document.querySelector('#test6 img'));

document.querySelector('#test7').prepend(document.createElement('SPAN').textContent = '123123');

document.querySelector('#test8').insertAdjacentHTML('afterbegin', '<span>123123</span>');

<div id="test1">
  <img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>

<div id="test2">
  <img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>

<div id="test3">
  <img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>

<div id="test4">
  <img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>

<div id="test5">
  <img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>

<div id="test6">
  <img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>

<div id="test7">
  <img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>

<div id="test8">
  <img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>


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