Create multiple modals in Semantic-ui

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<div id="showmodal" class="ui button primary">
Show Modal
</div>
<div class="ui first coupled modal">
    <div class="header">
      Modal #1
    </div>
    <div class="image content">
      <div class="image">
        <i class="right arrow icon"></i>
      </div>
      <div class="description">
        <p>We have more to share with you. Follow us along to modal 2</p>
      </div>
    </div>
    <div class="actions">
      
      <div class="ui primary button">Proceed</div>
    </div>
  </div> 

<div class="ui small second coupled modal">
    <div class="header">
      confirm
    </div>
    <div class="content">
      <div class="description">
        <p>Submit your form</p>
      </div>
    </div>
    <div class="actions">
      <div class="ui approve button">
        <i class="checkmark icon"></i>
        All Done
      </div>
    </div>
  </div>

JavaScript

$('.coupled.modal')
  .modal({
    allowMultiple: true
  })
;
// open second modal on first modal buttons
$('.second.modal')
  .modal('attach events', '.first.modal .button')
;
// show first immediately

  
$('#showmodal').click(function() {
	$('.first.modal')
  .modal('show')
;});