bootstrap – Best way to display an editable list of list


I’m working on a web project and I have a list of list which can be edited. It’s displayed within a modal, I can resize it as I want so it’s not that big of a deal.
My main problem is I don’t really know how I could display it with almost every information easily accessible (0 clicks ideally).

To give a little background, let’s say you have a JSON that looks like the following :

{
    "value": "value",
    "conditions": (
        ("condition1", "condition2"),
        ("condition1"),
        ("condition1", "condition2", "condition3")
    )
}

So, you have a value that have some conditions, there’s usually between 1 and 3 conditions in each conditions array (it can be more but most of the time it’s not).

Each conditions array represent elements tied together (like condition1 AND conditions2 …).

There is no length limit for the conditions array and the sub arrays.

I though about a list of input representing the conditions separated with a comma (so you can display it and edit it at the same place) but I realized that what’s in the input is already defined in the system and should not be random things. So input is a no go as it could compromise the data. A selection from a drop-down or checkbox somewhere is what I’ll use for the editable part. No issue here but I wanted to make clear that a list of input is not possible.

I’m using bootstrap 4, I though about of something like a grid of boostrap list-group but I’m concerned about the result readability and the fact that the AND is not explicit.

Also, we should be able to add or delete elements in each list.

List-group grid is the best I could think of by now.

Do you have any better solution ?

Thanks !