Add New Input Field On Click Checkbox jQuery

Add and remove the input fields dynamically by using jquery. We can open the new field by the user to get the additional info when the user clicks on the checkbox or button and add a new input field on click. Here you can see a live demo, of how it will work.

These types of snippets we needed when we want to give conditions to users while filling the form. Example: Are you an adult? if yes please tell us, what is your age?

HTML

<form>
    <label>
        <input type="checkbox" id="adultStatus"> Are you adult?
    </label>

    <input type="number" name="age" placeholder="What is you age?" id="Age">
</form>

css

* {
    box-sizing: border-box;
    font-family: arial;
}
#Age {
    display: none;
}
form {
    width: 300px;
    margin: 100px auto;
    background-color: #F5F5F5;
    padding: 30px 20px;
    border-radius: 10px;
    border: 1px solid #ddd;
}
label {
    display: block;
    margin-bottom: 25px;
    font-size: 20px;
}
input[type="checkbox"] {
    width: 20px;
    height: 20px;
    position: relative;
    top: 4px;
}
input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
}

JavaScript

// click Event JS
$('#adultStatus').click(function() {
    $("#Age").toggle(this.checked);
});