JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary submit-btn creategene">Create</button>

<!-- Create Confirmation Modal -->
<div class="modal fade" id="confirmCreateModal" tabindex="-1" role="dialog" aria-labelledby="confirmCreateModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="confirmCreateModalLabel">Confirm Create</h4>
      </div>
      <div class="modal-body">
        <p>Are you sure that you want to create this Gene?</p>
      </div>
      <div class="modal-footer">        
        <button type="button" id="confirmCreateYes" class="btn btn-primary">Yes</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
      </div>
    </div>
  </div>
</div>

JavaScript

$(document).ready(function ($) {
               
        $('.creategene').click(function () {
            
            $('#confirmCreateModal').modal();
            
            
        });
        $('#confirmCreateYes').click(function () {
                $('#confirmCreateModal').modal('hide');

                var test = "123";
                alert(test);
                console.log(test);             
            });
    });