JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
<script src="http://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>


<button type="button" class="btn btn-info" data-toggle="modal" data-target="#editinvModal" data-product="Product 2" data-type="Inventory Used" data-date="15-12-2015">Open Modal</button>
<div class="modal fade" id="editinvModal" role="dialog">
  <div class="modal-dialog">

    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
        <h4 class="modal-title custom_align" id="Heading">Edit The Transaction</h4>
      </div>
      <div class="modal-body">
        <form method="post" action="inventory_update.php">
          <!-- Product -->
          <div class="form-group">
            <select class="form-control" title="Select Product" id="prod1" name="productName">
              <optgroup>
                <option value="" disabled>Select Product</option>
                <option value="Product 1" >Product 1</option>
                <option value="Product 2" >Product 2</option>
              </optgroup>
            </select>
          </div>

          <!-- Transaction type -->
          <div class="form-group">
            <select class="form-control" title="Transaction Type" id="type1" name="transactionType">
              <optgroup>
                <option value="" disabled>Select Transaction Type</option>
                <option>Inventory Used</option>
                <option>Inventory Received</option>
                <option>Inventory Reconciled</option>
              </optgroup>
            </select>
          </div>

          <!--...

JavaScript

$(document).ready(function() {
$('#editinvModal').on('shown.bs.modal', function (event) {
    var button = $(event.relatedTarget); //button that triggered the modal

    var productName = button.data('product');
    var transactionType = button.data('type');
    var date = button.data('date');

    var modal = $(this);

    modal.find('.modal-body #prod1').val(productName);
    modal.find('.modal-body #type1').val(transactionType);
    modal.find('.modal-body #date1').val(date);
});

$(".form_datetime").datetimepicker({
  format: 'dd-mm-yyyy',
  minView: 2,
  pickTime: false,
  autoclose: true,
  todayBtn: true
});
});