JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<div>
  <ol type="A">
    <li class="proDocs">
      Procedures
      <ul class="hidden">
        <li>Upload Pictures</li>
      </ul>
      <ol type="a">
        <li class="proDocs">
          Performance
          <ul class="hidden">
            <li>Upload Pictures</li>
          </ul>
          <ol type="I">
            <li class="proDocs">
              Validation Documents
              <ul class="hidden">
                <li>Upload Pictures</li>
              </ul>
              <ol type="i">
                <li class="proDocs">
                  Evaluation
                  <ul class="hidden">
                    <li>Upload Pictures</li>
                  </ul>
                </li>
                <li class="proDocs">
                  Reports
                  <ul class="hidden">
                    <li>Upload Pictures</li>
                  </ul>
                </li>
                <li class="proDocs">
                  Certification
                  <ul class="hidden">
                    <li>Upload Pictures</li>
                  </ul>
                </li>
                <li class="proDocs">
                  Training
                  <ul class="hidden">
                    <li>Upload Pictures</li>
                  </ul>
                </li>
              </ol>
            </li>
            <li class="proDocs">
              Other Documents
              <ul class="hidden">
                <li>Upload Pictures</li>
              </ul>
            </li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
  </li>
  </ol>
</div>

CSS

.hidden {
  display: none;
}

JavaScript

$(document).ready(function() {
  $(".proDocs").click(function(e) {
  	e.stopPropagation();
    $(this).children("ul").toggleClass("hidden");
  });
});