Разделить легенду из одного div'a на 3 div'a

Можно ли в легенде, разделить все содержимое <div> со своими классами?
Сейчас сгенерированна своя легенда и пункт ее выглядит примерно так:

<div data-id="Поле 1" style="background-color: rgb(31, 119, 180);">Поле 1</div>

Соответственно на выходе мы получаем, в моем случае, <div> окрашенный в свой цвет и текст внутри этого <div>.
Собственно хочется понять, реально ли разделить то, что получается на выходе в на 3 <div>, где в первом будет цвет(сам он пустой), во втором будет первое слово(т.е. "Поле"), в третьем будет второе слово(т.е. "1")?

Помогите нубасику пожалуйста. =) Я все же хочу победить эту библиотеку.

jsfiddle