Only toggle one menu/ul item Javascript/Jquery

I have been trying to write a program that parses a json and creates a ul li dashboard. I have gotten it to work where it displays the a screenname with its subscreen names by looping through. When the parent screen name is clicked, it toggles between displayed the subscreen names. However, I want it to only toggle one of the subscreen names at a time. Right now, when I click on two unopened parent screennames, both of them open. I've been trying to put a counter and keeping track but I'm new to jquery and don't know how to go about it. Here is my html code.

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="styles.css">

    </head>


    <body>
       <div class="container">
            <div id="menu" class="list"></div>
        </div>
        <script type="text/javascript" src="menu.js"></script>

    </body>
</html>

Here is my javascript code:

  $(function() {
  
    function parseMenu(ul, menu) {
      for (var i = 0; i < menu.length; i++) {
        var li = $(ul).append(
          '<li>' + menu[i].screenName + '</li>');
        if (menu[i].subScreen != null) {
          var subul = $('<ul class="list"></ul>');
          $(li).append(subul);
          parseMenu($(subul), menu[i].subScreen);
        }
      }
    }
  
    var menu = $('#menu');
    parseMenu(menu, JSON.menu);
  });
  
  
  
  $(document).on('click', '.list > li ', function() {
    $(this).next('ul').toggle();
  });

Here is my json:

var JSON = {
    menu : [ {
        screenName : 'Title',
        link : '#',
        subScreen : [ {
            screenName : 'Enclosure1',
            link : '#',
            subScreen : null
        }, {
            screenName : 'Enclosure2',
            link : '#',
            subScreen : null
        }, {
            screenName : 'Enclosure3',
            link : '#',
            subScreen : null
        } ]
    },{
        screenName : 'Link',
        link : '#',
        subScreen : null
    },{
        screenName : 'Content',
        link : '#',
        subScreen : null
    },{
        screenName : 'Enclosures',
        link : '#',
        subScreen : [ {
            screenName : 'Enclosure1',
            link : '#',
            subScreen : null
        }, {
            screenName : 'Enclosure2',
            link : '#',
            subScreen : null
        }, {
            screenName : 'Enclosure3',
            link : '#',
            subScreen : null
        } ]
    }, {
        screenName : 'Authors',
        link : '#',
        subScreen : [ {
            screenName : 'Author1',
            link : '#',
            subScreen : null
        }, {
            screenName : 'Author2',
            link : '#',
            subScreen : null
        } ]
    },{
        screenName : 'Published At',
        link : '#',
        subScreen : null
    }, {
        screenName : 'Stream',
        link : '#',
        subScreen : [ {
            screenName : 'STR1',
            link : '#',
            subScreen : null
        }, {
            screenName : 'STR2',
            link : '#',
            subScreen : null
        } ]
    } ]
}

I want the javascript to act in a way where if an unopened screen name is clicked the other opened screen name with their respective subscreen names shud be closed before the newly clicked screen names are opened. Thanks!