[SOLVED] Multiple JSF components inside a PanelGrid

I am trying to get the reusable group of jsf 1.2 components inside a panelgrid using Facelet tag file with @Balusc's previous answer at How to make a grid of JSF composite component? as a reference. I have copied /WEB-INF/tags/input.xhtml and example.taglib.xml and the main application xhtml. However, I am running into some issues.
1. If I don't pass the id and simply do

<my:input id="cat" type="text" label="FirstName" bean="#{bean}" property="fName" required="true" />
<my:input id="dog" type="text" label="LastName" bean="#{bean}" property="lName" required="true />

in my main xhtml and open that page, I am getting java.lang.IllegalArgumentException and the exception trace:

java.lang.IllegalArgumentException
at javax.faces.component.UIComponentBase.validateId(UIComponentBase.java:543)
at javax.faces.component.UIComponentBase.setId(UIComponentBase.java:351)
at com.sun.facelets.tag.jsf.ComponentHandler.apply(ComponentHandler.java:151)
at com.sun.facelets.tag.CompositeFaceletHandler.apply(CompositeFaceletHandler.java:47)
at com.sun.facelets.tag.ui.CompositionHandler.apply(CompositionHandler.java:119)
at com.sun.facelets.compiler.NamespaceHandler.apply(NamespaceHandler.java:49)
at com.sun.facelets.compiler.EncodingHandler.apply(EncodingHandler.java:25)
at com.sun.facelets.impl.DefaultFacelet.include(DefaultFacelet.java:248)
at com.sun.facelets.impl.DefaultFacelet.include(DefaultFacelet.java:294)
at com.sun.facelets.impl.DefaultFaceletContext.includeFacelet(DefaultFaceletContext.java:268)
at com.sun.facelets.tag.UserTagHandler.apply(UserTagHandler.java:98)
at com.sun.facelets.tag.CompositeFaceletHandler.apply(CompositeFaceletHandler.java:47)
at com.sun.facelets.tag.jsf.ComponentHandler.applyNextHandler(ComponentHandler.java:314)
at com.sun.facelets.tag.jsf.ComponentHandler.apply(ComponentHandler.java:169)
at com.sun.facelets.tag.jsf.ComponentHandler.applyNextHandler(ComponentHandler.java:314)
at com.sun.facelets.tag.jsf.ComponentHandler.apply(ComponentHandler.java:169)
at com.sun.facelets.tag.CompositeFaceletHandler.apply(CompositeFaceletHandler.java:47)
at com.sun.facelets.compiler.NamespaceHandler.apply(NamespaceHandler.java:49)
at com.sun.facelets.tag.CompositeFaceletHandler.apply(CompositeFaceletHandler.java:47)
at com.sun.facelets.compiler.EncodingHandler.apply(EncodingHandler.java:25)
at com.sun.facelets.impl.DefaultFacelet.apply(DefaultFacelet.java:95)
at com.sun.facelets.FaceletViewHandler.buildView(FaceletViewHandler.java:524)
at com.sun.facelets.FaceletViewHandler.renderView(FaceletViewHandler.java:567)
at org.ajax4jsf.application.ViewHandlerWrapper.renderView(ViewHandlerWrapper.java:100)
at org.ajax4jsf.application.AjaxViewHandler.renderView(AjaxViewHandler.java:176)
at com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePhase.java:110)
at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:100)
at com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:139)

2.To get past this, when I pass the id value in my tag

<my:input id="cat" type="text" label="FirstName" bean="#{bean}" property="fName" required="true" />
<my:input id="dog" type="text" label="LastName" bean="#{bean}" property="lName" required="true />

I get duplicate Id for a component j_id2:cat error.

java.lang.IllegalStateException: duplicate Id for a component j_id2:cat
at org.ajax4jsf.application.TreeStructureNode.apply(TreeStructureNode.java:68)
at org.ajax4jsf.application.TreeStructureNode.apply(TreeStructureNode.java:92)
at org.ajax4jsf.application.TreeStructureNode.apply(TreeStructureNode.java:92)
at org.ajax4jsf.application.TreeStructureNode.apply(TreeStructureNode.java:92)
at org.ajax4jsf.application.AjaxStateManager.getTreeStructureToSave(AjaxStateManager.java:187)
at org.ajax4jsf.application.AjaxStateManager.buildViewState(AjaxStateManager.java:498)
at org.ajax4jsf.application.AjaxStateManager.saveSerializedView(AjaxStateManager.java:451)
at com.sun.facelets.FaceletViewHandler.renderView(FaceletViewHandler.java:615)
at org.ajax4jsf.application.ViewHandlerWrapper.renderView(ViewHandlerWrapper.java:100)
at org.ajax4jsf.application.AjaxViewHandler.renderView(AjaxViewHandler.java:176)
at com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePhase.java:110)
at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:100)
at com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:139)
at javax.faces.webapp.FacesServlet.service(FacesServlet.java:266)

3.To get past this, I removed all the c:when and just kept one input type of ' text' in the input.xhtml and now I see 2 textboxes rendered but when I do view source, I see

<tr>
  <td>
    <c:set var="id" value="cat"></c:set>
    <c:set var="required" value="true"></c:set>
  </td>
  <td><label for="j_id2:cat">First Name: &nbsp;*&nbsp;</label></td>
  <td><input id="j_id2:cat" type="text" name="j_id2:cat" value="Smith" /></td>
</tr>
<tr>
  <td></td>
  <td>
    <c:set var="id" value="dog"></c:set>
    <c:set var="required" value="true"></c:set>
  </td>
  <td><label for="j_id2:dog">Last Name: &nbsp;*&nbsp;</label></td>
</tr>
<tr>
   <td><input id="j_id2:dog" type="text" name="j_id2:dog" value="Joe" /></td>
   <td></td>
</tr>

I was expecting 2 rows but seeing 3 rows instead.Also I wasn;t expecting c:set definition in the tag file to be a part of my td view.

Any pointers will be appreciated.