Notorious_Creed Notorious_Creed - 17 days ago 6
CSS Question

Javascript & JQuery - Append an input into multiple divs with the same class

I'm trying to create an add function to add a new one new input to all the columns with class name domestic.

Now I've created an code in JavaScript & Jquery, but it only adds it to the first 6, and does this 7 times.

Is it possible to do this? I've searched on numerous post's and haven't found any answer.

HTML

<!-- START ONJECTIVES CONTAINER -->
<div class="container" id="weighings">
<!-- DOMESTIC NAME -->
<div class="colum" id="columtext">
<p>Domestic</p>
</div>
<!-- COLUM 4 DESCRIPTION -->
<div class="colum discription domestic" id="regio">
<p>Description</p>
<input id="box" type="text" oninput="calculate()" />
<input id="box" type="text" oninput="calculate()" />
<input id="box" type="text" oninput="calculate()" />
</div>
<!-- COLUM 5 LOW -->
<div class="colum domestic" id="regio">
<p>Low</p>
<input id="box" type="text" oninput="calculate()" />
<input id="box" type="text" oninput="calculate()" />
<input id="box" type="text" oninput="calculate()" />
</div>
<!-- COLUM 6 MEDIUM -->
<div class="colum domestic" id="regio">
<p>Medium</p>
<input id="box" type="text" oninput="calculate()" />
<input id="box" type="text" oninput="calculate()" />
<input id="box" type="text" oninput="calculate()" />
</div>
<!-- COLUM 7 HIGH -->
<div class="colum domestic last" id="regio">
<p>High</p>
<input id="box" type="text" oninput="calculate()" />
<input id="box" type="text" oninput="calculate()" />
<input id="box" type="text" oninput="calculate()" />
</div>
<!-- COLUM 8 LOW -->
<div class="colum domestic" id="regio">
<p>Low</p>
<input id="box" type="text" oninput="calculate()" />
<input id="box" type="text" oninput="calculate()" />
<input id="box" type="text" oninput="calculate()" />
</div>
<!-- COLUM 9 MEDIUM -->
<div class="colum domestic" id="regio">
<p>Medium</p>
<input id="box" type="text" oninput="calculate()" />
<input id="box" type="text" oninput="calculate()" />
<input id="box" type="text" oninput="calculate()" />
</div>
<!-- COLUM 10 HIGH -->
<div class="colum domestic" id="regio">
<p>High</p>
<input id="box" type="text" oninput="calculate()" />
<input id="box" type="text" oninput="calculate()" />
<input id="box" type="text" oninput="calculate()" />
</div>
</div>
<!-- END CONTAINER -->


SCSS

#box{
margin-top:5px;
width:10px;
height:10px;
background:black;
}

.colum{
display: block;
width: 200px;
text-align:center;
}

#regio{
width:50px;
margin-right:10px;
input{
width:50px;
}
}

.row{
width:100%;
height:30%;
}


Javascript & Jquery

$(document).ready(function() {
$('#newrow').click(function() {

var elements = document.getElementsByClassName('domestic');
if (elements.length == 0) return false;

var input = document.createElement('input');
input.id = 'box';
input.type = 'text';
input.oninput = 'calculate()';

$(".domestic").each(function() {
$(".domestic").append(input);
})


})
});

Codepen: http://codepen.io/salman15/pen/pNELXM?editors=0110

Answer

You're only creating one single element, and appending that element, so it ends up in the last place it was appended.

You have to create one element for each iteration of the loop, and you could use append() with a callback to iterate, instead of each

$(document).ready(function() { 
    $('#newrow').click(function() {
        if ( $('.domestic').length === 0 ) return false;

        $(".domestic").append(function(i) {
            return $('<input />', {
                id   : 'box' + i,
                type : 'text',
                on   : {
                    input : calculate
                }
            });
        });
    });
});
Comments