If you're retrieving data from the database, it's best to handle this on the server side by integrating those elements into your HTML directly rather than using jQuery.
Instead of <span> elements, why not consider using list elements like <ul> or <ol>, especially since your title and question mention a list as the main focus?
Assuming you are using PHP as your server-side language, you can transform the comma-separated list fetched from the DB into a proper list format and then utilize CSS for styling such as adding commas using a background image or CSS pseudo-elements with the content property.
Example
In a PHP script:
<?php
$readFromTheDB = "foo, bar, mon, key, base, ball";
$list = $keywordsArray = array_map('trim', explode(',', $readFromTheDB));
echo "<ul>";
$oddEven = true;
foreach($list as $listitem) {
$class = ($oddEven?"odd":"even");
echo "<li class=\"".htmlentities($class)."\">".htmlentities($listitem)."</li>";
$oddEven = !$oddEven;
}
echo "<ul>";
?>
In your CSS file:
ul li {
background:url(path/to/images/comma.png) BOTTOM RIGHT NO-REPEAT;
display:inline;
}
ul li.even {
font-weight:bolder;
}