Multi level cascading single select field

[devsuresh2005]

Hi Team,

I have a requirement to create the cascading dropdown (single select list) in a transition screen of a JSM project.

Here is the structure of data, basically, it has three levels i.e., based on the selection of the previous one next dropdown values should be populated. 

{
    "First Level 1": [{
       "Second Level 1-1": [{
          "Third Level 1": "Third Level 1",
          "Third Level 2": "Third Level 2",
          "...": "..."
       }],
       "Second Level 1-2": [{
           "Third Level 1": "Third Level 1",
           "Third Level 2": "Third Level 2",
           "...": "..."
       }],
       "...": "..."
    }],
    "First Level 2": [{
      "Second Level 2-1": [{
           "Third Level 1": "Third Level 1",
           "Third Level 2": "Third Level 2",
           "...": "..."
       }],
       "Second Level 2-2": [{
            "Third Level 1": "Third Level 1",
            "Third Level 2": "Third Level 2",
            "...": "..."
       }],
       "...": "..."
    }]
}

Note: I have tried the 'Select List (cascading)' plugin it didn't work as we expected also considering the 'Third Level' data is duplicated in our case, we end up duplicating options, screenshot FYR,

What is the best way to implement the same? Any inputs will be much helpful and much appreciated.

Thanks.