How to handle jQuery multiselect widget on create and edit forms based on jQuery AJAX

I'm new to Web development. I'm working on a requirement where I need to create two forms:

1. Create


2. Update

In create form :

I have a multiselect dropdown list whose <option> tags are populated by the values extracted from XML got using jQuery Ajax.

<div class="row">
    <label for="Ivrmapping_selectionList">Selection List</label>
    <select id="Ivrmapping_selectionList" name="Ivrmapping[selectionList]" class="multiselect" style="display: none;">
        <option value="rows">6</option>
        <option value="cols">50</option>
    </select>
    <button type="button" class="ui-multiselect ui-widget ui-state-default ui-corner-all" aria-haspopup="true" tabindex="0" style="width: 494px;"><span class="ui-icon ui-icon-triangle-2-n-s"></span><span>6</span>
    </button>
</div>  

In Update form : I'm going to use the same multiselect widget in update form as well to edit the options got from database and as well as new added options from the XML.

Now, coming to validation:

1. I need to check if the values in the database match with that in XML, if yes then keep those options checked. If any of those values in database not shown in XML should be warned to the user.


2. If any new items are added in XML, then it should be shown in the multiselect option.

So, how can I work on this scenario. It would be of great help if they can answer me on this.