CODEWITHSUNDEEP
javascriptjqueryhtml
user9396340
user9396340

Reputation: 1

How to append to 2 columns dynamically

I have many inputs and I want a solution to create a row with 2 columns and then append input to them one by one (so it's 50% for each side unless they are impar).

Atm is creating many rows. How do I do this?

$.each(inputs, function (index, input) {
    $(".modal-body").append('<div class="row"><div class="col-sm-6"></div><div class="col-sm-6"></div></div>');
 }

Upvotes: 0

Views: 59

Answers (1)

KL_
KL_

Reputation: 1513

You can use .wrap(), and then .after().

$('input[type="text"]').wrap('<div class="first-col"></div>');
$('.first-col').after('<div class="second-col"></div>');
*{
  margin: 0;
  padding: 0;
}

.first-col{
  display: inline-block;
  background: blue;
  height: 30px;
  width: 200px;
  margin: 20px 0 20px 0;
}

.second-col{
  display: inline-block;
  width: 100px;
  height: 20px;
  background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="fst"/><hr/>
<input type="text" id="snd"/><hr/>
<input type="text" id="trd"/><hr/>
<input type="text" id="frt"/><hr/>

Upvotes: 1

Related Questions