Panel Dynamic

                        
        
            Survey.StylesManager.applyTheme("modern");
        



                
                    var json = {
   "pages": [
      {
         "name": "page1",
         "elements": [
          {
            "type": "paneldynamic",
            "name": "relatives",
            "title": "Please enter all blood relatives you know",
            "renderMode": "progressTop",
            "templateTitle": "#{panelIndex}. Information about: {panel.relativeType}",
            "templateElements": [
              {
                "name": "relativeType",
                "type": "dropdown",
                "title": "Relative",
                "choices": [
                  "father",
                  "mother",
                  "brother",
                  "sister",
                  "son",
                  "daughter"
                ],
                "isRequired": true
              },
              {
                "name": "isalive",
                "type": "radiogroup",
                "title": "Alive?",
                "startWithNewLine": false,
                "isRequired": true,
                "colCount": 0,
                "choices": [
                  "Yes",
                  "No"
                ]
              },
              {
                "name": "liveage",
                "type": "dropdown",
                "title": "Age",
                "isRequired": true,
                "startWithNewLine": false,
                "visibleIf": "{panel.isalive} = 'Yes'",
                "choicesMin": 1,
                "choicesMax": 115
              },
              {
                "name": "deceasedage",
                "type": "dropdown",
                "title": "Deceased Age",
                "isRequired": true,
                "startWithNewLine": false,
                "visibleIf": "{panel.isalive} = 'No'",
                "choices": [
                  {
                    "value": -1,
                    "text": "Unknown"
                  }
                ],
                "choicesMin": 1,
                "choicesMax": 115
              },
              {
                "name": "causeofdeathknown",
                "type": "radiogroup",
                "title": "Cause of Death Known?",
                "isRequired": true,
                "colCount": 0,
                "startWithNewLine": false,
                "visibleIf": "{panel.isalive} = 'No'",
                "choices": [
                  "Yes",
                  "No"
                ]
              },
              {
                "name": "causeofdeath",
                "type": "text",
                "title": "Cause of Death",
                "isRequired": true,
                "startWithNewLine": false,
                "visibleIf": "{panel.isalive} = 'No' and {panel.causeofdeathknown} = 'Yes'"
              },
              {
                "type": "panel",
                "name": "moreInfo",
                "state": "expanded",
                "title": "Detail Information about: {panel.relativeType}",
                "elements": [
                  {
                    "type": "matrixdynamic",
                    "name": "relativeillness",
                    "title": "Describe the illness or condition.",
                    "rowCount": 0,
                    "columns": [
                      {
                        "name": "illness",
                        "cellType": "dropdown",
                        "title": "Illness/Condition",
                        "choices": [
                          "Cancer",
                          "Heart Disease",
                          "Diabetes",
                          "Stroke/TIA",
                          "High Blood Pressure",
                          "High Cholesterol or Triglycerides",
                          "Liver Disease",
                          "Alcohol or Drug Abuse",
                          "Anxiety, Depression or Psychiatric Illness",
                          "Tuberculosis",
                          "Anesthesia Complications",
                          "Genetic Disorder",
                          "Other – describe"
                        ],
                        "isRequired": true
                      },
                      {
                        "name": "description",
                        "cellType": "text",
                        "title": "Describe",
                        "isRequired": true
                      }
                    ]
                  }
                ]
              }
            ],
            "panelCount": 2,
            "panelAddText": "Add a blood relative",
            "panelRemoveText": "Remove the relative"
          }
         ]
      }
   ]
};

                    window.survey = new Survey.Model(json);
                
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
survey.data = {'relatives':[{'relativeType':'father'},{'relativeType':'mother'}]};
        
            $("#surveyElement").Survey({
            model: survey 
            });
        

                    

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Panel Dynamic, jQuery Survey Library Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/jquery"></script>
    <script src="/DevBuilds/survey-jquery/survey.jquery.min.js"></script>
    <link href="/DevBuilds/survey-core/modern.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body style="margin: 0">
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
            </div>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>