Include same code segment from another file at multiple places of single Facelet and render dyncamically

Question

I'm aware that there have many questions regarding similar topic, from which i understood about View Build time and View Render Time Tags, but I'm unable to find the solution for this. Please point me to right question if answered.

Consider the scenario where I have written some facelet code (a bunch of input components) written in an xhtml file. I want to include this code/set of components in another xhtml, at many places. which is explained in below image.

If user ui:include i'll have Duplicate ID issue. To come over that if I use c:if my ViewScoped bean is converted to RequestScoped.

Following is the code I tried. index.xhtml

<h:form id="form1">
    <h:selectOneMenu id="genderSelect" value="#{myBean.gender}">
        <p:ajax update="dynaPanel"/>
        <f:selectItem itemLabel="--select--" itemValue=""/>
        <f:selectItem itemLabel="Male" itemValue="m"/>
        <f:selectItem itemLabel="Female" itemValue="f"/>
    </h:selectOneMenu>

    <h:panelGroup id="dynaPanel" layout="block">
        <h:panelGroup id="malePanel" rendered="#{myBean.gender eq 'm'}">
            <h1>Male</h1><br/>

            <h:outputLabel value="Name:"/>
            <h:inputText value="#{myBean.name}"/><br/>
            <ui:include src="country.xhtml"/>

        </h:panelGroup>

        <h:panelGroup id="femalePanel" layout="block" rendered="#{myBean.gender eq 'f'}">
            <h1>Female</h1><br/>
            <ui:include src="country.xhtml"/><br/>

            <h:outputLabel value="Name:"/>
            <h:inputText value="#{myBean.name}"/>

        </h:panelGroup>

    </h:panelGroup>

    <p:commandButton value="Submit" action="#{myBean.action}" />

</h:form>

country.xhtml

<h:panelGroup>
    <h:outputLabel value="Country:"/>
    <h:selectOneMenu id="countrySelect" value="#{myBean.country}">
        <f:selectItem itemLabel="USA" itemValue="us"/>
        <f:selectItem itemLabel="UK" itemValue="uk"/>
        <f:selectItem itemLabel="India" itemValue="in"/>
        <f:selectItem itemLabel="China" itemValue="ch"/>
    </h:selectOneMenu>
</h:panelGroup>

MyBean.java

@ManagedBean
@ViewScoped
public class MyBean {

    private String country;
    private String name;
    private String gender;

    @PostConstruct
    public void init(){
        System.out.println("@PostConstruct");
    }

    public void action(){
        System.out.println(name+"-"+gender+"-"+country);
    }

    @PreDestroy
    public void destory(){
        System.out.println("@PreDestroy");
    }

    //Setters Getters

}

How do I achieve this without duplicate ID issue or not compromising the ViewScope of my ManagedBean.

Using JSF-2.1.13