Seperate Concatenated Form Values - 4 Text Boxes That Are Supposed To Load 4 Seperate Values Of Data

I have 4 text boxes that are supposed to load 4 seperate values of data from one field in one table from a database. The field is called interface_cropsettings (from the interface table) and these values have been concatenated and comma seperated in this field.

Code:

Once the form is filled out and saved, the data is inserted into the database and the values from these 4 text boxes are concatenated, comma seperated and inserted into that one field correctly.

(Example)

If the 4 text boxes have the following values:

In the database field they become:

However, if the form is closed and then re-opened, each text box displays the entire database field rather then each value seperated in the corresponding text box.

(Example)

All 4 text boxes display this:

I already know why the data appears like this in the form, my problem is that I'm not sure how to write the javascript to seperate the values into the correct corresponding fields, assuming javascript is what I should be using!

Also, this is kind of irrelevant but just in case you're wondering, this form is part of a cold fusion application!