Listing with JSON or plain HTML I have a website which has reviews about games. Right now, to list the advantages (+) and disadvantages (-) of that game, there's a textarea in the admin panel with a WYSIWYG editor with only  element. So my users list their (+) with list elements :

&lt;ul&gt;
    &lt;li&gt;Game is too slow&lt;/li&gt;
    &lt;li&gt;Game is very hard&lt;/li&gt;
&lt;/ul&gt;


I want to update it and I was wondering if it wouldn't be a better way to have input fields to add their (+) and (-) about the game and each time they want to add one, they click on a button which adds an input field. Then, when the form is submitted, I could encode the datas with JSON like :

[
    ['Game is too slow'],
    ['Game is very hard']
]


Would be like:

&lt;input name="advantages[]" /&gt; &lt;a href="#" data-add&gt;+&lt;/a&gt;
&lt;script&gt;
$('[data-add]').click(function(){
    $(this).before('&lt;br /&gt;&lt;input name="advantages[]" /&gt;')
});
&lt;/script&gt;


and then:

// encode    
$list = json_encode($_POST['advantages']);
//decode
echo '&lt;ul&gt;';
foreach($list as $item) {
    echo '&lt;li&gt;'.$item.'&lt;/li&gt;';
}
echo '&lt;/ul&gt;';


And when I want to show the datas, I could decode them and display them as a list, which would be like the first option. My point would be to get rid of the WYSIWYG and maybe have a more flexible system.

What do you think?
First of all, there's a problem with the HTML approach you have:


That's risky (XSS most of the time)
Do you expect them to be web developers? I can be a gamer/reviewer with zero HTML knowledge.
We're writing a review, we should only write reviews, not HTML. Leave HTML to the developers.




Now, as you said, you can do JSON, and your other approach seems to be right:

Form

&lt;form&gt;
  &lt;h3&gt;Advantages&lt;/h3&gt;
  &lt;button&gt;Add&lt;/button&gt; // get nextAll advantages, find the last and append after
  &lt;input type="text" name="advantages[]" /&gt;
  &lt;input type="text" name="advantages[]" /&gt;
  &lt;input type="text" name="advantages[]" /&gt;

  &lt;h3&gt;Disadvantages&lt;/h3&gt;
  &lt;button&gt;Add&lt;/button&gt; // get nextAll disadvantages, find the last and append after
  &lt;input type="text" name="disadvantages[]" /&gt;
  &lt;input type="text" name="disadvantages[]" /&gt;
  &lt;input type="text" name="disadvantages[]" /&gt;
&lt;/form&gt;


Data structure to server

{
  advantages : ['foo','bar','baz'],
  disadvantages : ['foo','bar','baz']
}