Understanding JSF Converter interface

Business requirement
We had to let the user enter the employer name and employer title for his employer (put in a div lets say the class="empInfo"). Now the user may even have multiple employers, and so we provide a button which on click will create another div(I basically clone the div).

Work Flow
There is a form Start page(.xhtml file written in jsf ) where the user can enter the details of the form including the employer info(s). The user then clicks continue and then they go to the review page(also another JSF page) where the user can review add/delete more employer info.

How I am approaching this problem. 1.We had to let the user enter the employer name and employer title for his employer.

     - Put two text field in a div with class="empInfo".<br>
     - Add button for the add/delete using Jquery to clone/delete the div with class 

2.Putting the value back in the managed bean.
This is where It gets tricky (for me,given my relatively less experience in J2ee and especially JSF).

     - The bean property must be mapped to two ArrayList
              - one for the employer Name
              - one for the employer Title
     - I cannot write a forEach JSF/JSP tag because the values cannot be directly mapped to the backend after I clone a div.
     - So I added two hidden field (one for each bean property).
     - When the user clicks on the navigation button to go to a different page I use JS to collect all the value in the div with class ="empInfo" and I set the two hidden value field which is mapped to the Array Lists of the bean.    
     - I know,the value from the view is always String. 
     - So I decided to implement a converter to convert the string to the AL.         

Problem
- I am not able to get the value from the view to be sucessfully passed to the overridden converter method in the validater class.

Hidden Fields in JSF (Using tomahawk tags)

<div class="XYZ">   
    <t:inputHidden value="#{Ctrlr.employerName}" id="eName" forceId="true" converter="jsArrayConverter"></t:inputHidden>        
</div>

Converter Interface

import javax.faces.convert.Converter;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.ConverterException;

public class FMLAConverter implements Converter{

@Override
public ArrayList<String> getAsObject(FacesContext context, UIComponent   component,String ret) {
    System.out.println("Inside Converter function, getting value from the view    and putting it in the model");    
    System.out.println("I am working with "+ret +"Hmmm");
    ArrayList<String> list = new ArrayList<String>();
    int j=0;
    int i=ret.indexOf(',');
    int len = ret.length();
    if (i == -1){
        if(len==0){
            System.out.println(list);
            return list;
        }
        else
        {
            list.add(ret);
        }
    }
    while(i>0)
    {
        list.add(ret.substring(j,i));
        j=i+1;
        if(i+1<len)
            i = ret.indexOf(',', i+1);
        else
            i=-1;   
    }
    System.out.println(list);
    return list;
    }

    @Override
    public String getAsString(FacesContext context, UIComponent component,
        Object value) {
    ArrayList <String> list = (ArrayList <String>) value;
    int i=0;
    StringBuilder str= new StringBuilder();
    if(list==null)
        { 
            System.out.println("It is null");
            return str.append("").toString();
        }
    if(list.size()==0){
        System.out.println("Really");
        str.append("");
        return str.toString();
    }

    for(String string:list)
    {   
        if(i++==0)  
            str.append(string); 
        else
            str.append(",").append(string);         
    }
    System.out.println("Not bad");
    return str.toString();
    }
    }

Eliminating silly errors

   -JS correctly add the the value to the hidden field
    Attaching screenshot from the chrome console.
    [![google console screenshot][1]] http://ift.tt/1JLPHU6

Debuggin Steps

- Working at it for the last 48 hours,cannot understand why its not working.Did my research,can not find any thing.
- Looking in the system out log on the server I see the log

   I am working with Hmmm

1.So I made the inference the value back from the hidden field is "" an empty string which is strange.(unless If i have not completely understand the JSF lifecycle)
2.To be sure,I see that the ret value is after the user clicks on the next button in the form. I added a checkpoint at window.unload and took the screen shot from the console, so JS is fine.

3.Any help is greatly appreciated thanks.I already went through BALUS's tutorials(not all,but a lot),which was very helpful.Also any other links or tutorials to JSF would be more helpful.