Can't open modal box after closing it - Jquery

I have a modal box in my view. On the first instance, when i click the button, it opens. When i close the modal box, it never opens again until i refresh the page. Why is that happening ?

HTML

 <div id="item" class="modal" data-backdrop="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                  <h5 class="modal-title">Item</h5>
                  </div>
                  <div class="modal-body p-lg">
                      <div class="form-group">
                        <label>Name of Product</label>
                        <input type="text" class="form-control" name="productName" id="productName" placeholder="Product Name">
                      </div>                 
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="productSave" data-dismiss="modal">Save</button>
                  </div>
                </div>
              </div>
            </div>

JS

$(document).on('click', '#add_prod_modal', function(e){
    $('#item').modal('show');
});