You'll want to do something similar to what I explained for the "view" in your other question ( https://stackoverflow.com/a/14968046/477513 ).
You want to change the list from a string to an array (via explode("\n", $features)
), then run your javascript on each of those features. Since this is basically the same javascript that you'd do when someone adds a new item via the textbox, you will want to move all that code into a function and call the function in both situations (otherwise you will be copying and pasting the same code, which violates the "Don't Repeat Yourself" rule and inevitably leads to bugs in the future). So your auto.js code could look something like this:
var listItemCounter = 0;
function addItem(text) {
if (text.length) {
listItemCounter++;
var itemHtml = '<li data-id="' + listItemCounter + '">'
+ text
+ '<button data-id="' + listItemCounter + '">x</button>'
+ '</li>';
var inputHtml = '<input type="hidden" name="features[]" value="' + text + '" data-id="' + listItemCounter + '" />';
$('ul.featureList').append(itemHtml);
$('ul.featureList').after(inputHtml);
}
}
function removeItem(id) {
$('input[data-id="' + id + '"]').remove();
$('li[data-id="' + id + '"]').remove();
}
$("#addList").click(function() {
additem($("#inputList").val());
});
$('ul').on('click','button', function(el) {
var id = $(this).attr('data-id');
removeItem(id);
});
Then in your edit.php file, add this code to output the saved data and call the addItem function on each one:
<?php
//populate existing data when edit dialog is first opened
$featuresPHPArray = explode("\n", $features);
$featuresJSArray = Loader::helper('json')->encode($featuresPHPArray);
?>
<script>
var savedItems = <?php echo $featuresJSArray; ?>;
$.each(savedItems, function() {
addItem(this);
});
</script>