How to pass updated list to controller?

I'm in the middle of developing a Skills feature in my project And I'm trying to figure out how to do the next thing, I will first describe how the system is built so far:

There is a selectsize text window that allows you to select several skills together, after you select a link, it inserts it below the selection window and asks you what level of your chosen skill.

It can be added and deleted, but it slightly complicates me because I can not find a way to transfer all the selected skills and also selected their level to the controller.

I just want to know in Controller what only the selected skills and their level, that's my code so far built:

List type:

        public class SkillDetails
        {
            public uint SkillID { get; set; }
            public Levels Level { get; set; }
            public SkillDetails(uint id, Levels level) =>
                (SkillID, Level) = (id, level);
        }

List definition:

      public IList<Skill.SkillDetails> Skills { get; set; }

Javascript - On select event: Skills[0].SkillID is just a test and it didn't work and it crashes the website.

        $eventSelect.on("select2:select", function (e)
        {
            console.log("select: ", e);
            var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + e.params.data.id + "\"/>");
            var fType = $('<div class="input-group mb-2"><span class="input-group-prepend"><span class="input-group-text">' + e.params.data.text + '</span ></span ><input type="hidden" name="Skills[0].SkillID" value="' + e.params.data.id + '"/><select class="form-control" name="TEST"><option value="0">None</option><option value="1">Know</option><option value="2">Understand</option><option value="3">Master</option></select></div>');
            fieldWrapper.append(fType);
            $("#buildyourform").append(fieldWrapper);
        });

Javascript - On un-select event: Here whats happen when delete skill selected from selectsize.

        $eventSelect.on("select2:unselect", function (e)
        {
            console.log("unselect: ", e);
            $( "#field" + e.params.data.id).remove();
        });

Because it is dynamic and every time a new skill is created / deleted how can an updated SkillDetails type list be transferred to the controller according to the skills I selected and entered their level?