What I'm trying to get is the immediate upper div value (Accounts Admin) when I'm clicking on a radio button.
Below is my HTML structure. Whenever I click on the admin or alan radio button give me the div inner text Accounts Admin.
How can get that value?
<div class="display-flex flex-row">
<div class="p-1 ez-sub-heading mt-1">
Accounts Admin
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input
id="admin"
type="radio"
value="admin"
name="eng-name"
class="eng-name userlist active"
/>
</div>
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input
id="alan"
type="radio"
value="alan"
name="eng-name"
class="eng-name userlist active"
/>
</div>
</div>
</div>
I'm trying this way but I can't get the value.
$(this).parent().find(".ez-sub-heading").text()
Assuming you have multiple blocks of this, I would change the html structure a bit so you have a wrapper around the complete block. With the closest() function you can find the first wrapper parent and then use find() to look for the header element.
You can use trim() to remove the whitespace caused by code indention.
$('.userlist').on('click', (e) => {
var text = $(e.currentTarget).closest('.wrapper').find('.ez-sub-heading').text();
console.log(text.trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="display-flex flex-row wrapper">
<div class="p-1 ez-sub-heading mt-1">
Accounts Admin
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="admin" type="radio" value="admin" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="alan" type="radio" value="alan" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
</div>
<div class="display-flex flex-row wrapper">
<div class="p-1 ez-sub-heading mt-1">
Accounts Admin 2
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="admin" type="radio" value="admin" name="eng-name2" class="eng-name userlist active">
</div>
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="alan" type="radio" value="alan" name="eng-name2" class="eng-name userlist active">
</div>
</div>
</div>
</div>
With your HTML structure as it is, you need to find the closest (nearest parent) .row and then use prevAll to get the header row.
$(this).closest(".row").prevAll(".flex-row").first().text().trim()
$("input.userlist").click(function() {
console.log($(this).closest(".row").prevAll(".flex-row").first().text().trim())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="display-flex flex-row">
<div class="p-1 ez-sub-heading mt-1">
Accounts Admin
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="admin" type="radio" value="admin" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="alan" type="radio" value="alan" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
<div class="display-flex flex-row">
<div class="p-1 ez-sub-heading mt-1">
Second Header
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="admin" type="radio" value="admin" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="alan" type="radio" value="alan" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
A small change to the HTML structure and adding some classes would make this much simpler (not included here as already suggested in the other answer).
Related
I trying to use radio-button for showing contents and hide others depending on selected radio. What is going on is everything works fine, as each radio button show its content the only issue is that the radio-button not showing that is selected.
Html code:
<div class="col-12">
<div class="row">
<div class="col-xl-3 col-sm-6">
<div class="card radius-10 border-start border-0 border-3 border-info">
<div class="card-body">
<div class="d-flex align-items-center">
<div>
<p class="mb-0 text-secondary" style="padding-bottom: 5px;">Payments</p>
<div class="custom-radio mr-3">
<input type="radio" id="radio_1" name="paymentradi">
<label class="radio_wrap" data-radio="radio_1"></label>
</div>
</div>
<div class="widgets-icons-2 rounded-circle bg-gradient-scooter text-white ms-auto"><i class="icofont-dollar"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6">
<div class="card radius-10 border-start border-0 border-3 border-danger">
<div class="card-body">
<div class="d-flex align-items-center">
<div>
<p class="mb-0 text-secondary" style="padding-bottom: 5px;">Ads</p>
<div class="custom-radio mr-3">
<input type="radio" id="radio_2" name="adsradi">
<label class="radio_wrap" data-radio="radio_2"></label>
</div>
</div>
<div class="widgets-icons-2 rounded-circle bg-gradient-bloody text-white ms-auto"><i class="icofont-megaphone"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="content">
<div class="radio_content radio_1">
<p>1</p>
</div>
<div class="radio_content radio_2">
<p>2</p>
</div>
</div>
</div>
</div>
The javascript code:
$(document).ready(function(){
/* by default hide all radio_content div elements except first element */
$(".content .radio_content").hide();
/* when any radio element is clicked, Get the attribute value of that clicked radio element and show the radio_content div element which matches the attribute value and hide the remaining tab content div elements */
$(".radio_wrap").click(function(){
var current_raido = $(this).attr("data-radio");
$(".content .radio_content").hide();
$("."+current_raido).show();
})
});
I had also create short screen record video it may explain more the situation:
https://www.youtube.com/watch?v=MqM2jvqI29I&ab_channel=MohamadSimo
In this example I have the onclick function on the main div and i dont want the button to execute the same onclick, only execute its own? how should i paroach this?
<div onclick="$('#extra-info').slideToggle();" class="card card-body item">
<div class="row">
<h6 style="position:absolute;left:2%;">Comanda #1</h6>
<h5 style="position:absolute;right:2%;">15 min</h5>
</div>
<br>
<br>
<div class="row">
<div class="col col-md-10">
<h5>Cristian Cutitei</h5>
<h6>0737032567</h6>
</div>
<div>
<button id="status" onclick="checkText('#status', 2);" style="margin:auto;" class="btn btn-primary"><span>In pregatire</span></button>
</div>
</div>
<div id="extra-info" style="display:none;">
<br>
</div>
Thank you in advance!
You can do that by calling event.stopPropagation(); in the button.
<button id="status" onclick="checkText('#status', 2); event.stopPropagation();" style="margin:auto;" class="btn btn-primary"><span>In pregatire</span></button>
Read more about it from Here
But I would suggest a cleaner solution,
Separate the card body from the card footer where the button exist.
<div class="card card-body item">
<div onclick="$('#extra-info').slideToggle();">
<div class="row">
<h6 style="position:absolute;left:2%;">Comanda #1</h6>
<h5 style="position:absolute;right:2%;">15 min</h5>
</div>
<br>
<br>
<div class="row">
<div class="col col-md-10">
<h5>Cristian Cutitei</h5>
<h6>0737032567</h6>
</div>
</div>
</div>
<div>
<button id="status" onclick="e => e.stopPropagation();" style="margin:auto;" class="btn btn-primary"><span>In pregatire</span></button>
</div>
</div>
<div id="extra-info" style="display:none;">
<br>
</div>
Can I switch the content via JavaScript or JQuery? I have content A and content B, where position A is next to envy and B is on the right, when I click the check box the content B will change to the left and content A to the right, and when I click again, it will change to like the beginning again.
This my snippet, I tried exchanging all div content between A and B. When I clicked on the check box, there will be all content in div A will exchange with div B. but why does only the input form change? while the content doesn't change, can anyone help me? is there something wrong with my code?
function swap_content(conta,contb)
{
var tmp = document.getElementById(conta).value;
document.getElementById(conta).value = document.getElementById(contb).value;
document.getElementById(contb).value = tmp;
var tdp = document.getElementById(text_id1).value;
document.getElementById(text_id1).value = document.getElementById(text_id2).value;
document.getElementById(text_id2).value = tdp;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" rel="stylesheet">
<body>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-5" id="conta" style="background: red;">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id1" id="text_id1" value="content A" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">
This is desc about Content A </span><br>
<img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox ">
<div class="ibox-title">
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" checked class="onoffswitch-checkbox" id="example1" onclick="swap_content('text_id1','text_id2')">
<label class="onoffswitch-label" for="example1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5" id="contb" style="background: blue">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id2" id="text_id2" value="content B" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content B</span> <br>
<img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">
</div>
</div>
</div>
</div>
</div>
<script src="http://webapplayers.com/inspinia_admin-v2.8/js/jquery-3.1.1.min.js"></script>
</body>
If you simply want to invert the position of the two elements you can simply use flex reverse.
Obviously this will only be applicable if you don't want to maintain the background of the initial boxes.
This will be much faster to process than rebuilding the dom.
$(function() {
cbToggleFields();
});
$('#example1').off('change').on('change', function() {
cbToggleFields();
});
function cbToggleFields() {
if ($('#example1').is(':checked')) {
$('#rowA').addClass('reverse');
} else {
$('#rowA').removeClass('reverse');
}
}
#rowA{
display:flex;
flex-direction:row;
justify-content:left;
/*For vertical alignment*/
/*flex-direction:column;*/
}
#rowA.reverse{
flex-direction:row-reverse;
/*flex-direction:column-reverse;*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper wrapper-content animated fadeInRight">
<div id="rowA" class="row">
<div class="col-lg-5" id="conta" style="background: red;">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id1" id="text_id1" value="content A">
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content A</span><br>
<img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox ">
<div class="ibox-title">
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" class="onoffswitch-checkbox" id="example1">
<label class="onoffswitch-label" for="example1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5" id="contb" style="background: blue">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id2" id="text_id2" value="content B">
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content B</span><br>
<img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">
</div>
</div>
</div>
</div>
</div>
I recommend using the .click jquery Event Listener to as I have done below. Then I used .html() to get the contents of the div and to swap the contents.
$('#example1').click(function() {
var conta = $('#conta').html();
var contb = $('#contb').html();
$('#conta').html(contb);
$('#contb').html(conta);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" rel="stylesheet">
<body>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-5" id="conta" style="background: red;">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id1" id="text_id1" value="content A">
</h5>
</div>
<div class="ibox-body">
<span style="color:white">
This is desc about Content A </span><br>
<img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox ">
<div class="ibox-title">
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" checked class="onoffswitch-checkbox" id="example1">
<label class="onoffswitch-label" for="example1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5" id="contb" style="background: blue">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id2" id="text_id2" value="content B">
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content B</span> <br>
<img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">
</div>
</div>
</div>
</div>
</div>
</body>
Using pure javascript here, use value to get the value of the input and swap the content around.
You can even make the function work with different types by adding another paramter to the swap_content function. function swap_content(conta, contb, type = 'input'){} now it will work with divs and inputs.
function swap_content(conta, contb, type = 'input')
{
// check wether to use innerHTM or value for inputs
var contentType = type === 'input' ? 'value' : 'innerHTML';
var contenta = document.getElementById(conta)[contentType];
var contentb = document.getElementById(contb)[contentType];
document.getElementById(conta)[contentType] = contentb;
document.getElementById(contb)[contentType] = contenta;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" rel="stylesheet">
<body>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-5" id="conta" style="background: red;">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id1" id="text_id1" value="content A" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">
This is desc about Content A </span><br>
<img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox ">
<div class="ibox-title">
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" checked class="onoffswitch-checkbox" id="example1" onclick="swap_content('text_id1','text_id2')">
<label class="onoffswitch-label" for="example1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5" id="contb" style="background: blue">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id2" id="text_id2" value="content B" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content B</span> <br>
<img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">
</div>
</div>
</div>
</div>
</div>
<script src="http://webapplayers.com/inspinia_admin-v2.8/js/jquery-3.1.1.min.js"></script>
</body>
You can use the same function to swap different elements around.
function swap_content(conta, contb, type = 'input')
{
// check wether to use innerHTM or value for inputs
var contentType = type === 'input' ? 'value' : 'innerHTML';
var contenta = document.getElementById(conta)[contentType];
var contentb = document.getElementById(contb)[contentType];
document.getElementById(conta)[contentType] = contentb;
document.getElementById(contb)[contentType] = contenta;
}
function swap_items() {
swap_content('conta', 'contb', 'innerHTML'); // swap items using innerHTML
swap_content('inp1', 'inp2'); // swap items using value for input
}
<div id="conta"><p>I will be displayed on second place on dropdown's particular value</p></div>
<div id="contb"><p>I will be displayed on first place on dropdown's same value for which first div is placed at second position</p></div>
<input type="text" id="inp1" value="Will be placed second" />
<input type="text" id="inp2" value="Will be placed first" />
<button onclick="swap_items();">Swap content</button>
As you are using bootstrap, why not take advantage of the column ordering feature ?
This way it is only a matter of changing class names.
This assume you are using both on the same row (as in your example).
$('#conta').addClass('order-12').removeClass('order-1');
$('#contb').addClass('order-1').removeClass('order-12');
I have an index like this:
<body>
<div id="page-container">
<div id="header">
<div class="main">
<div class="content">
<div id="website-link"></div>
<div id="cart">
<div class="price">120,00 €</div>
<div class="cart-icon"><img src="img/cart.png" /></div>
<div class="items">0</div>
</div>
</div>
</div>
<div class="bottom">
<div class="content">
<div id="bradcrumbs">3D TOOL > Upload > <span class="active"> Customize</span></div>
<div id="menu">
<ul>
<li>Help</li>
</ul>
</div>
</div>
</div>
</div>
<div id="main-content">
<div class="block-container" id="block-container">
<div id="tools">
<form action="#" enctype="multipart/form-data" method="post" id="uploader">
<input type="file" name="fileUpload" id="fileUpload" style="display: none" multiple accept=".stl,.obj,.stp,.step">
<label for="fileUpload">
<div id="addmore" style="cursor: pointer"></div>
</label>
</form>
<div id="checkout">Checkout</div>
</div>
</div>
</div>
</body>
</html>
using a jquery function i prepend this code inside block-container div:
<div id='upload-container-<?php echo $i;?>' class='upload-container'>
<div class="form-data">
<div class="col col1">
<div class="col-content"><img src="img/square.jpg" /></div>
<div class="col-info">Nome del file</div>
</div>
<div class="col col2">
<div class="col-content">
<label class="label">MATERIALI</label>
<div class="select-style">
<?php
echo"<select name='materiali' class='materiali' autofocus tabindex='20' >";
foreach($oxmL->Materials->Material as $material)
{
echo "<option value=$material->MaterialID>$material->Name</option>";
}
echo"</select>";
?>
</div>
<label class="label">FINITURA</label>
<div id="selectmateriali2"class="select-style">
<?php
$id=$oxmL->Materials->Material['0']->MaterialID;
echo"<select name='materiali2' class='materiali2' id='materiali2' autofocus tabindex='20'>";
foreach($oxmL->Materials->Material as $material)
{
if($material->MaterialID==$id)
{
foreach($material->Finishes->Finish as $finish)
{
echo "<option value=$finish->FinishID>$finish->Name</option>";
}
}
}
echo"</select>";
?>
</div>
<label class="label">QUANTITA</label>
<input name="quantity" id="quantity" type="number" class="quantita" min="1" step="1" value="1">
</div>
<div class="col-info"></div>
</div>
<div class="col col3">
<div class="col-content">
<div class="size-form">
<div class="label">Resize</div>
<input class="size" type="text" value="100"/>
</div>
<div class="size-text">Change the size of your object in percent</div>
<div class="size-info">
<div class ="box-title">
<div class="title-icon"><img src="img/3dpr-form-xyz-cube.png" /></div>
</div>
<div class="axis-area">
<div class="axis axis-x">X: <label for="x" class="labelx">2</label></div>
<div class="axis axis-y">Y: <label for="y" class="labely">3</label></div>
<div class="axis axis-z">Z: <label for="z" class="labelz">4</label></div>
</div>
</div>
</div>
<div class="col-info">
<div class="icons">
<div class="button button-duplicate"></div>
<div class="button button-delete"></div>
</div>
<div class="price">450.20 €</div>
</div>
</div>
</div>
<div class="item-info">
<div class="filename col col1"> <label for="filename">filename.ciops</label></div>
<div class="icons col col2">
<div class="button button-zoom"></div>
<div class="button button-duplicate"></div>
<div class="button button-delete"></div>
</div>
<div class="price col col3"> <label for="price" class="labelprice">450.20</label> €</div>
</div>
</div>
I want to had a click listener to the div with the "button button-duplicate" class, i made it like this:
$('#block-container').on('input','.quantita',quantityChanged);
$('#block-container').on('input','.size',scaleChanged);
$('#block-container').on('click','.button button-delete', function(){
alert("ok");
//some code
});
$('input[type=file]').on('change', prepareUpload);
$('form').on('submit', uploadFiles);
but it doesn't works, instead every other listener in the page works using #block-container as static element. What can i do? Any suggestion? Thank you
The problem with your code is your selector.
You have:
$('#block-container').on('click','.button button-delete', function(){
alert("ok");
//some code
});
And it should be:
$('#block-container').on('click','.button.button-delete', function(){
alert("ok");
//some code
});
When you want to select an element by two or more classes, you have to write the class selectors all together, without white spaces between them, in this way '.class1.class2.class3'
These are the set of divs where i want to add the loop on some count.
I have tried jquery and javascript but doesn't work. Please help out.
It takes a count from checkbox and the count is values selected in checkbox the following set of divs need be populated dynamically. I have written a jquery that gets the count as well as the checkbox values.As and when user selects these boxes the set of divs need to be appear as the number of counts.
function arrayValues(item, index)
{
var cd = $("input[name=car_damage]:checked");
var eg = cd.map(function () {return this.value;}).get().join(",");
var temp = new Array();
temp = eg.split(",");
text="";
alert(temp);
//alert(eg);
var ef = cd.size();
alert(ef);
}
Checkbox code:
<hr>
<div class="car_map" id="carmap">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4">
<div class="item">
Front
<input type="checkbox" name="car_damage" value="Front" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-4">
<div class="item">
Front Wing Left
<input type="checkbox" name="car_damage" value="Front Wing Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Front Wing Right
<input type="checkbox" name="car_damage" value="Front Wing Right"/>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4">
<div class="item">
Bonnet
<input type="checkbox" name="car_damage" value="Bonnet"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Windscreen
<input type="checkbox" name="car_damage" value="Windscreen"/>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-xs-5 col-sm-4">
<div class="item">
Front Door Left
<input type="checkbox" name="car_damage" value="Front Door Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Front Door Right
<input type="checkbox" name="car_damage" value="Front Door Right"/>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Roof
<input type="checkbox" name="car_damage" value="Roof"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-4">
<div class="item">
Back Door Left
<input type="checkbox" name="car_damage" value="Back Door Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Back Door Right
<input type="checkbox" name="car_damage" value="Back Door Right"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Rear Windscreen
<input type="checkbox" name="car_damage" value="Rear Windscreen"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-4">
<div class="item">
Rear Left
<input type="checkbox" name="car_damage" value="Rear Left"/>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4">
<div class="item">
Rear Right
<input type="checkbox" name="car_damage" value="Rear Right"/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 ">
<div class="item">
Rear
<input type="checkbox" name="car_damage" value="Rear"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="btn btn-custom btn-sm btn-decline center-block" data-scroll="step3">Back</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="btn btn-custom btn-sm btn-decline center-block">Save For Later</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="btn btn-sm btn-custom center-block" data-scroll="step5" id="add_trip" onclick="arrayValues()">Continue</div>
</div>
</div>
</div>
<hr>
<div class="col-xs-12 col-sm-6">
<div class="form-label">
Rear
</div>
<div class="photo-picker" id="photo-picker">
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="box photos">
<div class="row">
<div class="col-xs-12">
<h4>Photo Instructions</h4>
</div>
</div>
<div class="photo-sample" id="photo-sample">
<div class="row">
<div class="col-xs-12">
<div class="form-sublabel">
Stand approx. 2m back from the Rear of the vehicle.</div>
<imgsrc="/hfiprojectstorefront/_ui/desktop/common/hfiproject/images/placeholder-photo.png" class="img-responsive center-block" alt="" />
</div>
</div>
</div>
<div class="photo-real" id="photo-real">
<div class="row">
<div class="col-xs-12">
<div class="cont">
<video id="v" class="img-responsive center-block"></video>
<div class="player-buttons" id="take" style="display:none;"></div>
</div>
<canvas id="canvas" style="display:none;"></canvas>
<img src="" id="photo" class="img-responsive center-block" />
</div>
<div class="col-xs-12">
<div class="form-label">
Was this photo taken at the scene?
</div>
</div>
<div class="col-xs-12">
<div class="list-group segmented-control">
<span class="list-group-item half active">
YES
<input type="radio" name="scene_photo" value="YES" checked="checked"/>
</span>
<span class="list-group-item half ">
NO
<input type="radio" name="scene_photo" value="NO"/>
</span>
</div>
</div>
<div class="col-xs-12">
<div class="form-label">
Optional Comment
</div>
</div>
<div class="col-xs-12">
<textarea class="form-control" name="optional" id="optional"></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
Delete
</div>
<div class="col-xs-12 col-sm-6">
Save
</div>
</div>
</div>
</div>
</div>
<hr>
It is not clear the solution you are seeking.
However requiring the least amount of work would be creating a function to execute on change and jquery to manipulate your DOM elements not a great solution though if you require state management.
I believe a better solution would be use reactjs where use can create components and utilise jsx.
Or AngularJS frameworks where you can do an ng-repeat or custom directive that takes inputs to display your divs.
It's really not clear what you are trying to populate, but you can generate any DOM element dynamically like this.
fnCreateDOMElement = function(el, num, context) {
var e = document.createElement(el);
for(var i=0; i<num; i++){
document.context.appendChild(e);
}
}
above snippet could be utilized like this.
document.getElementById("populator").addEventListener('change', function(){
//reset contents of container if needed. comment if not needed
document.getElementById('container').innerHTML = "";
var times = this.value;
for(var i=0; i<times; i++) {
var mydiv = document.createElement('div');
var myparag = document.createElement('p');
mydiv.setAttribute('class', 'foo');
myparag.setAttribute('class', 'fooized');
var txt = document.createTextNode('Foo #'+(i+1));
myparag.appendChild(txt);
mydiv.appendChild(myparag);
document.getElementById('container').appendChild(mydiv);
}
});
<div id="container">
</div>
<input type="number" min="0" placeholder="how many?" id="populator">
above functions can be refactored with javascript's default/optional arguments.