It seems like you have a list of li elements and you want to output text followed by their one-based index position in the list. You can achieve this with the following jQuery code:
$("li").each(function(i) {
$(this).text("text"+(i+1));
});
EDIT If you are looking to extract numerical indices from the text and append descriptions to each li element, you could use something like this:
$("li").each(function() {
var index = $(this).text().replace(/title(\d+)/, "$1");
$(this).append("<span class=\"col2\">description-" + index + "</span>");
});
You can style them using CSS for positioning, such as floating the col2 element to the right with a consistent width.
li { overflow: hidden; }
li .col2 { float: right; width: 25%; }
EDIT It looks like you may not need JavaScript at all. To create a table-like structure with list items, you can simply use HTML and CSS like this:
<li>
<span class="col1">Title 1</span>
<span class="col2">Description 1</span>
</li>
You can then utilize CSS floats to position the elements similar to how tables work. Here's an example of the CSS styling:
li { overflow: hidden; /* Row level styling */ }
li .col1 { float: left; width: 75%; }
li .col2 { float: right; width: 25%; }
Alternatively, you can stack floats next to each other like this:
li { overflow: hidden; /* Row level styling */ }
li .col1 { float: left; width: 25%; }
li .col2 { float: left; width: 50%; }
li .col3 { float: left; width: 25%; }
I have created a fiddle with a demonstration: http://jsfiddle.net/g8Xkp/