Modal Fields Not Clearing on Close in Bootstrap

I’m currently working on a web application using Bootstrap modals and jQuery, and I am having trouble clearing the input fields and other elements in my modal when it is closed.

I have two modals in my application: one for adding a new category and another for editing an existing category. Here’s a snippet of the HTML for the new category modal:

<div class="modal-dialog modal-lg" role="document">
    <form id="new_category_form" method="POST" action="{% url 'add_category' %}" enctype="multipart/form-data">
      {% csrf_token %}
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">New Category</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Enter category name" name="new_name" id="new_name" required>
          </div>
          <div class="input-group">
            <div class="col-md-12 p-0">
              <input type="file" class="form-control w-100" accept="image/*" name="new_image" id="new_image" placeholder="Category Image" required>
              <img class="row" id="preview" src="" width="200" style="float:left; margin-top: 10px;">
            </div>
          </div>
          <div class="d-block">
            <div class="form-check form-check-inline">
              <input id="is_free-pre" type="radio" name="is_paid" value="0" class="form-check-input" required>
              <label for="is_free-pre" class="form-check-label">Free</label>
            </div>
            <div class="form-check form-check-inline">
              <input id="is_paid-pre" type="radio" name="is_paid" value="1" class="form-check-input" required>
              <label for="is_paid-pre" class="form-check-label">Paid</label>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" id="btn_new_category" class="btn btn-primary">Save</button>
        </div>
      </div>
    </form>
  </div>
</div>

Here’s the jQuery code I’m using to handle the modal:

$(document).ready(function() {
    $('#newCategoryModal').on('hidden.bs.modal', function() {
        $('#new_name').val(''); 
        $('#preview').attr('src', '').css('display', 'none'); 
        $('#is_paid-pre').prop('checked', false); 
        $('#is_free-pre').prop('checked', false); 
    });
    
    document.getElementById('new_image').addEventListener('change', function(event) {
        const file = event.target.files[0]; 
        const preview = document.getElementById('preview'); 
        
        if (file) {
            const reader = new FileReader(); 
            reader.onload = function(e) {
                preview.src = e.target.result; 
                preview.style.display = 'block'; 
            }
            reader.readAsDataURL(file); 
        } else {
            preview.style.display = 'none'; 
        }
    });
});

I implemented a jQuery event listener for the modal’s hidden.bs.modal event to clear the input fields and reset the image preview whenever the modal is closed. Specifically, I tried:

Setting the value of the category name input field to an empty string.
Setting the image preview’s src attribute to an empty string and hiding it.
Unchecking both radio buttons for the payment type (Free/Paid).

I expected that when I closed the modal, all input fields, including the text input for the category name, the image preview, and the radio buttons, would be reset to their default states, allowing for a fresh start the next time the modal is opened.

When I closed the modal, the input fields and the image preview did not clear as intended. The input field still contained the previous value, the image preview remained visible, and the radio buttons retained their checked state. It seems that the jQuery code responsible for clearing these fields is executing, but the fields do not reset as expected.