javascript - Select box: add value as class to div -

I have this form where visitors can choose the letter type; It is necessary to add the value of that latetepe as a class; So we can style it in a stylesheet to preview the letter style.

  & lt; P class = "form-row form-row-wide addon-wrap-2094-lettertype-of-text" & gt; & Lt; Select class = "addon addon-select" name = "addon-2094-lettertype-of-text" & gt; & Lt; Option value = "" & gt; Choose an option ... & lt; / Options & gt; & Lt; Option data-value = "" value = "lucida-caligraphy -1" & gt; Lucida Caligraphy & lt; / Options & gt; & Lt; Option data-value = "" value = "verdana-2" & gt; Wordana & lt; / Option & gt; & Lt; Option data-value = "" value = "bakersville-old face-3" & gt; Backersville Old Face & lt; / Options & gt; & Lt; / Select & gt; & Lt; / P & gt;  

I already have a javascript

  $ ('addon-select'). ('Option', function () {var selected = $ (this option) .find ('option: selected'). Val (); $ ('product-add-on-make-it-personal'). AddClass $ (This) .val ());}) );  

This adds value to the JavaScript div. Product-add-on-make-it-personal; But there are 2 problems:

• The previous square is not being removed; There are also other classes; So I can not do the deleted square in the total
• There is one more option on the page after that. I can use class.addon-wrap-2094-lettertype-of-text of p-tag above to ensure that I trigger on the right selection box. Click on "$" ("change.exe")