JSFiddle - React, Tailwind, and code Playground

HTML

<select id="myclasses" size="5" multiple>
  <option>Api.Domain.Interfaces.MyClass1</option>
  <option>Api.Domain.Interfaces.MyClass2</option>
  <option>Api.Domain.Interfaces.MyClass3</option>
  <option>Api.Domain.Models.MyModel1</option>
  <option>Api.Domain.Models.MyModel2</option>
  <option>Api.Infrastructure.Repositories.MyRepo1</option>
  <option>Api.Infrastructure.Repositories.MyRepo2</option>
</select>
<button id="button">JSONify</button>

<div id="result"></div>

JavaScript

$(function() {
    $("#button").click(function(){
        var output = [];
        var input = $( "#myclasses option:selected" );
        
        for (var i = 0; i < input.length; i++) {
            var chain = input[i].text.split(".");
            
            var currentNode = output;
            for (var j = 0; j < chain.length; j++) {
                var wantedNode = chain[j];
                var lastNode = currentNode;
                for (var k = 0; k < currentNode.length; k++) {
                    if (currentNode[k].text == wantedNode) {
                        currentNode = currentNode[k].children;
                        break;
                    }
                }
                // If we couldn't find an item in this list of children
                // that has the right name, create one:
                if (lastNode == currentNode) {
                    var newNode = currentNode[k] = {text: wantedNode, children:[]};
                    currentNode = newNode.children;
                }
            }
        }
                
        $("#result").html(JSON.stringify(output));
    });
});