Adding multiple nodes to vbox javafx

I am new in JavaFx and I spend too much time trying to put radio button + textfield dynamically. After typing a number, I want to display my radio buttons and my TextFields in that way (blue and red ones)

But I got this:

I tried with vbox, hbox, both of them, but it did not work!

Can anyone figure out the problem in my code please!!! Thanks for your help

 RadioButton[] btn = new RadioButton[100]; //our Collection to hold newly created Buttons
TextField[] xlist = new TextField[100]; //our Collection to hold newly created Buttons
TextField[] ylist = new TextField[100];

final ToggleGroup grpBtn = new ToggleGroup();
@FXML
private Group noeuds;
@FXML
private VBox vb2;
@FXML
private HBox hb2;



@FXML
public void addBtn(int i, RadioButton[] btn) {
    btn[i] = new RadioButton();
    btn[i].setText(String.valueOf(i + 1));
    btn[i].setToggleGroup(grpBtn);
    btn[i].setSelected(true);
    btn[i].setTranslateX(-5);
    btn[i].setTranslateY(-340);
    btn[i].setPadding(new Insets(0, 0, 20, 20));
    vb2.getChildren().add(btn[i]);


}

@FXML
public void addX(int i, TextField[] xlist) {
    xlist[i] = new TextField();
    xlist[i].setTranslateX(-80);
    xlist[i].setTranslateY(40);
    xlist[i].setStyle("-fx-background-color: red;");
    xlist[i].setPrefSize(30, 30);
    xlist[i].setTooltip(new Tooltip("X coordinate of " + (i + 1)));
    hb2.getChildren().add(xlist[i]);

}

@FXML
public void addY(int i, TextField[] ylist) {
    ylist[i] = new TextField();
    ylist[i].setTranslateX(-78);
    ylist[i].setTranslateY(40);

    ylist[i].setStyle("-fx-background-color: blue;");
    ylist[i].setPrefSize(30, 30);

    ylist[i].setTooltip(new Tooltip("Y coordinate of" + (i + 1)));
    hb2.getChildren().add(ylist[i]);



}

public void initialize(URL url, ResourceBundle rb) {

    //some code

    for (int i = 0; i < Integer.parseInt(nodeID.getText()); i++) {
        addBtn(i, btn);
        // System.out.println("jjjj"+btn.length);
        addX(i, xlist);
        // System.out.println("mmmm"+xlist.length);
        addY(i, ylist);


    }
}

This little app might help give you a boost. Read over the code and try to get an understanding. I tried to make comments in the code.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.RadioButton;
import javafx.scene.control.TextField;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

/**
 *
 * @author blj0011
 */
public class JavaFXApplication7 extends Application {

    @Override
    public void start(Stage primaryStage) {        
        AnchorPane root = new AnchorPane();

        VBox vbox1 = new VBox();
        vbox1.setSpacing(5);//Set vbox spacing

        //Handles the number of row to be added to the vbox
        for(int i = 0; i < 4; i++)
        {
            vbox1.getChildren().add(addNewRow(i));
        }

        root.getChildren().add(vbox1);
        Scene scene = new Scene(root, 300, 250);

        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

    //Method creates all the nodes for a new row.
    HBox addNewRow(int rowNumber)
    {
        //Create nodes and adding correct spaceing
        HBox hbox = new HBox();
        hbox.setSpacing(5);
        RadioButton radioButton = new RadioButton();
        radioButton.setPrefHeight(25);
        TextField textField = new TextField();
        textField.setPrefWidth(40);
        Label label = new Label(Integer.toString(rowNumber + 1));
        label.setPrefHeight(25);
        HBox trailingHBox = new HBox();
        trailingHBox.setSpacing(5);
        hbox.getChildren().addAll(radioButton, textField, label, trailingHBox);

        //Event handler on textfield. Add right about of trailing textfields
        textField.setOnKeyReleased((event)->{            
            if(textField.getText().trim().length() > 0 && Integer.parseInt(textField.getText()) > 0)//If textfield has some value greater than zero. I didn't catch for non integers
            {
                int tempInt = Integer.parseInt(textField.getText());
                //clear trailingHBox so that new Trailing hbox can be added
                if(trailingHBox.getChildren().size() > 0)
                {
                    trailingHBox.getChildren().clear();
                }
                //add the correct number of textFields.
                for(int i = 0; i < tempInt - 1; i++)
                {
                    TextField tempTextField = new TextField();
                    tempTextField.setPrefWidth(20);
                    trailingHBox.getChildren().add(tempTextField);
                }

                //add the blue and red textfields
                TextField textFieldBlue = new TextField();
                textFieldBlue.setPrefWidth(40);
                textFieldBlue.setStyle("-fx-background-color: BLUE");
                TextField textFieldRed = new TextField();
                textFieldRed.setPrefWidth(40);
                textFieldRed.setStyle("-fx-background-color: RED");

                trailingHBox.getChildren().addAll(textFieldBlue, textFieldRed);                
            }
            else{
               trailingHBox.getChildren().clear();//clear traingHbox if it's has no value
            }
        });       

        return hbox;
    }
}