Develop Reference

Jquery Repeater, how to make the 'create button' at the bottom?

I understand that the data-repeater-create="" must be inside the id="left_repeater", otherwise it will not function as a create button. Is there a way that the button will function outside the id="left_repeater" or id="right_repeater"?
My goal is when I click add left button, it will only create the left input and vise versa for the add right button. Both of the button is at the very bottom.
JS fiddle link to see the codes
$('#left_repeater').repeater({
show: function() {
$(this).slideDown();
},
});
$('#right_repeater').repeater({
show: function() {
$(this).slideDown();
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<div id="left_repeater">
<div data-repeater-list="left_items">
<div data-repeater-item>
<div class="row">
<div class="col-6">
<input type="text" name="name" class="form-control form-control-sm m-input" placeholder="left">
</div>
<div class="col-6">
</div>
</div>
</div>
</div>
<!-- <div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add</span></span>
</div> -->
</div>
<div id="right_repeater">
<div data-repeater-list="right_items">
<div data-repeater-item>
<div class="row">
<div class="col-6">
</div>
<div class="col-6">
<input type="text" name="name" class="form-control form-control-sm m-input" placeholder="right">
</div>
</div>
</div>
</div>
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add</span></span>
</div>
</div>
<div class="row">
<div class="col-6 text-center">
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add Left</span></span>
</div>
</div>
<div class="col-6 text-center">
<div data-repeater-create="" class="btn btn-sm btn-success">
<span><i class="la la-plus"></i><span>Add Right</span></span>
</div>
</div>
</div>

Place the #left_repeater inside div container.
<div class="container">
<div id="left_repeater">
.....
</div>
</div>
add CSS style to this
.container {
display: flex;
}
https://jsfiddle.net/y1bpot5n//

Keep modal displayed when I click submit

I want to create a sign in - signup form, using html <form> and bootstrap4 modal. Every thing is okay but when I click the submit button, the modal is dismissed, so the error of data validate format can not be show for clients. Now how can I keep the modal displayed when I click submit button?
<a class='nav-link account-active' href='#' data-toggle="modal" data-target="#my_account"></a>
<div class="modal fade" id="my_account" style='height: auto' tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="flase">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<ul class="nav nav-tabs w-100" role="tablist">
<li class="nav-item w-50">
LOGIN
</li>
<li class="nav-item w-50">
SIGN UP
</li>
</ul>
</div>
<div class="tab-content" style="font-size: 14px;">
<div id="login" class="tab-pane active" style='height: 550px'>
<form method='post' action=''>
<h4 class="modal-title text-center mt-4 mb-3" id="eModalLabel">WELCOME BACK!</h4>
<h6 class="text-center text-muted">Login to your account</h6>
<div class="error" id='signin_err'>{signin_err}</div>
<div class='section-input'>
<div class="mt-2">Email</div>
<input type="text" class="form-control w-100 my-2" name="" autofocus>
</div>
<div class='section-input'>
<div class="mt-2">Password</div>
<input type="text" class="form-control w-100 my-2" name="">
</div>
<div class='section-input'>
<button class="btn btn-primary w-100 my-3" type="submit" name="signin_btn">LOGIN</button>
</div>
</form>
<div class="forgot text-center mb-3">forgot your password?</div>
</div>
<div id="register" class="tab-pane" style='height: auto'>
<h4 class="modal-title text-center mt-4 mb-3" id="eModalLabel" style='text-transform: uppercase;'>It's as easy as sunday morning</h4>
<h6 class="text-center text-muted">Sign up now</h6>
<div class='error' id='signup_err'>{signup_err}</div>
<div class='section-input' style="margin-top: 70px">
<div class="mt-2" id='signUp_name'>Name</div>
<input type="text" class="form-control w-100 my-2" name="name" autofocus >
</div>
<div class='section-input'>
<div class="mt-2" id='signUp_mail'>Email</div>
<input type="text" class="form-control w-100 my-2" name="mail" id='mail' >
</div>
<div class='section-input'>
<div class="mt-2" id='signUp_psd'>Password</div>
<input type="text" class="form-control w-100 my-2" name="psd" >
</div>
<div class='section-input'>
<div class="mt-2" id='confirm_psd'>Confirm password</div>
<input type="text" class="form-control w-100 my-2" name="psd_cf" >
</div>
<div class='section-input'>
<button class="btn btn-primary w-100 my-3" style='height:48px;margin-bottom:100px;border-radius: 0' type="" name="signup_btn">SIGN UP</button>
</div>
<div style='height:70px'></div>
</div>
</div>
</div>
</div>
</div>

I have no idea how your backend is being implemented, but based on your code, my guess is that your page is being refreshed every time you click submit because of the empty action. I see no other way that the modal will close.
You'll need to submit via AJAX if you want to display any validation without refreshing.

Change immediate previous icon on same level when collapsing

I've three collapsible elements, each one with its header and a button for collapse it. I'm using Material Design icons for the button icon.
<div class="col-md-8 order-md-1">
<form class="needs-validation" novalidate="">
<p class="h4">
<i class="material-icons md-36">turned_in_not</i> Documento
<button class="btn btn-outline-info btn-sm float-right" type="button" data-toggle="collapse" data-target="#collapseDetails" aria-expanded="true" aria-controls="collapseExample">
<i class="material-icons" >remove_circle_outline</i>
</button>
</p>
<hr class="mb-4" style="background-color:#169db2">
<div class="collapse show" id="collapseDetails" style="">
<div class="row">
<div class="col-md-4 mb-3">
<label for="DOCUMENTNUMBER">Número</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text border-info"><i class="material-icons color-info">insert_drive_file</i></span>
</div>
<span class="form-control border-info alert-info text-center">001-10-0-10459</span>
</div>
</div>
<div class="col-md-8 mb-3">
<label for="TITLE">Título</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text border-info"><i class="material-icons color-info">book</i></span>
</div>
<span class="form-control border-info">PINTURA RAMPA AGAETE</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mb-3">
<label for="INSTALLATION">Instalación</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text border-info"><i class="material-icons color-info">directions_boat</i></span>
</div>
<span class="form-control border-info text-center">COMPAÑIA</span>
</div>
</div>
<div class="col-md-8 mb-3">
<label for="DEPARTMENT">Departamento</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text border-info"><i class="material-icons color-info">view_quilt</i></span>
</div>
<span class="form-control border-info">MAINTENANCE</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mb-3">
<label for="CONFIRMATIONDATE">Fecha de Confirmación</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text border-info"><i class="material-icons color-info">today</i></span>
</div>
<span class="form-control border-info">-</span>
</div>
<div class="invalid-feedback">
</div>
</div>
<div class="col-md-8 mb-3">
<label for="SUPPLIER">Proveedor</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text border-info"><i class="material-icons color-info">local_shipping</i></span>
</div>
<span class="form-control border-info">JOTUN IBERICA, S.A.</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mb-3">
<label for="PRIORITY">Prioridad</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text border-info"><i class="material-icons color-info">error_outline</i></span>
</div>
<span class="form-control border-info text-center">N/A</span>
</div>
<div class="invalid-feedback">
</div>
</div>
<div class="col-md-8 mb-3">
<label for="BUDGET">Presupuesto</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text border-info"><i class="material-icons color-info">card_travel</i></span>
</div>
<span class="form-control border-info">120425 - Mantenimiento Rampas TCI</span>
</div>
</div>
</div>
</div>
<br>
<p class="h4">
<i class="material-icons md-36">place</i> Entrega
<button class="btn btn-outline-info btn-sm float-right collapsed" type="button" data-toggle="collapse" data-target="#collapseDelivery" aria-expanded="false" aria-controls="collapseExample">
<i class="material-icons">add_circle_outline</i>
</button>
</p>
<hr class="mb-4" style="background-color:#169db2">
<div class="collapse" id="collapseDelivery" style="">
<div class="row">
<div class="col-md-6 mb-3">
<label for="Name">Nombre</label>
<span class="form-control border-info"> </span>
</div>
<div class="col-md-6 mb-3">
<label for="location">Ubicación</label>
<span class="form-control border-info"> </span>
</div>
</div>
<label for="address2">Dirección de Entrega<span class="text-muted"></span></label>
<div class="mb-3">
<span class="form-control border-info"> </span>
</div>
<div class="row">
<div class="col-md-4 mb-3">
<label for="country">País</label>
<div class="mb-3">
<span class="form-control border-info"> </span>
</div>
</div>
<div class="col-md-5 mb-3">
<label for="contact">Contacto</label>
<span class="form-control border-info"> </span>
</div>
<div class="col-md-3 mb-3">
<label for="phone">Teléfono</label>
<span class="form-control border-info"> </span>
</div>
</div>
<div class="row">
<div class="col-md-8 mb-3">
<label for="DeliveryDate">Email</label>
<span class="form-control border-info"> </span>
</div>
<div class="col-md-4 mb-3">
<label for="DeliveryDate">Condiciones de Entrega</label>
<span class="form-control border-info"> </span>
</div>
</div>
</div>
<br>
<p class="h4">
<i class="material-icons md-36">credit_card</i> Facturación
<button class="btn btn-outline-info btn-sm float-right" type="button" data-toggle="collapse" data-target="#collapseInvoice" aria-expanded="false" aria-controls="collapseExample">
<i class="material-icons">add_circle_outline</i>
</button>
</p>
<hr class="mb-4" style="background-color:#169db2">
<div class="collapse" id="collapseInvoice">
<div class="row">
<div class="col-md-6 mb-3">
<label for="DeliveryDate">Nombre</label>
<span class="form-control border-info">Customer S.A.</span>
</div>
<div class="col-md-6 mb-3">
<label for="DeliveryDate">Términos de Pago</label>
<span class="form-control border-info"> </span>
</div>
</div>
<label for="address2">Dirección de Facturación<span class="text-muted"></span></label>
<div class="mb-3">
<span class="form-control border-info">POL. IND. AÑAZA, SN</span>
</div>
<div class="mb-3">
<span class="form-control border-info">EDIFICIO</span>
</div>
<div class="mb-3">
<span class="form-control border-info">CP 38111 SC DE TENERIFE</span>
</div>
<div class="row">
<div class="col-md-4 mb-3">
<label for="country">País</label>
<div class="mb-3">
<span class="form-control border-info"> </span>
</div>
</div>
<div class="col-md-5 mb-3">
<label for="contact">Contacto</label>
<span class="form-control border-info"> </span>
</div>
<div class="col-md-3 mb-3">
<label for="phone">Teléfono</label>
<span class="form-control border-info"> </span>
</div>
</div>
<hr class="mb-4">
</div>
</form>
</div>
I'm stucked on changing the icon of the button for the element what it's collapsed or expanded by using jQuery.
Supposedly i should change the immediate previous icon on same level with .prev() but it's not working.
$(document).ready(function () {
$('.collapse')
.on('shown.bs.collapse', function () {
$(this)
.prevAll()
.find("button")
.find(".material-icons")
.text("remove_circle_outline");
})
.on('hidden.bs.collapse', function () {
$(this)
.prevAll()
.find("button")
.find(".material-icons")
.text("add_circle_outline");
});
});
I also tried to use .prevAll() but then it's changing all previous icons at the same level.
What can i do to change only the button icon of the element which is being collapsed or expanded?
This is a Fiddle here showing my problem.

Use $("[data-target='#"+ $(this).attr('id') +"']") to select button with the data-target of the clicked collapse.
Here is the working code. fiddle

How can I auto scroll to bottom of the page after collapse?

I have this element that uses bootstrap collapse.
When I click on "header" of this élément, it opens and a scrollbar appears but I like to appears being at the bottom.
I try many solution from stackoverflow, but none seem to work.
I can do this ?
<div class="row">
<div class="col-sm-12">
<div id="panel-profil" class="panel panel-info">
<div id="panel-heading-profil" class="panel-heading text-center">
<a id="link-heading-profil" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo" onclick="changeArrowProfil()">
<div class="row">
<div id="triangleUn" class="col-sm-1">
<span id="triangle1" class="glyphicon glyphicon-triangle-bottom"></span>
</div>
<div class="col-sm-10">
<span class="fa fa-truck fa-1"></span> Profil du véhicule
</div>
<div id="triangleDeux" class="col-sm-1">
<span id="triangle2" class="glyphicon glyphicon-triangle-bottom"></span>
</div>
</div>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div id="panel-body-profil" class="panel-body">
<label class="text-info" for="sel1">Longueur du véhicule :</label>
<form class="form-horizontal">
<div class="form-group form-group-sm">
<div class="col-sm-1"><img src="../img/B10a.png" height="35" width="35" ></img></div>
<input class="col-sm-2 control-label inputConstraint"
for="formGroupInputSmall" type="text" value="6.00 m" autocomplete="off" id="value_length" readonly/>
<div class="col-sm-8 sliderConstraint"
for="formGroupInputSmall">
<input type="range" min="0" step="1" max="3" value="0"
id="value_length_slide"
onchange="changeValue('length')" />
</div>
</div>
</form>
...
...
</div>
<div class="row" id="valid-param">
<div class="col-sm-12">
<button id="btn-valid-param" onclick="modifierProfileSaisi();" type="submit" class="btn btn-success btn-sm btn-block" > Valider les paramètres</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

If your using an onClick event, then within that onClick, write this line of code,
window.scrollTo(0,document.body.scrollHeight);
This will scroll you to the bottom of the page.

Bootstrap Modal pop up displays only the first record.

I want to edit the records for that i am using twitter bootstrap modal pop up. I have a view-product page which contains a button to open a modal pop up but at present time the code i am using displays only one record on view-product page, but my database contains more records and further more if i click the edit icon it displays only the first record and also i want to know how to get the id on the next page i.e. editproducts.php I have spend much of the on this topic but did not solve it please help by giving suggestions. Thanks....
view-product.php
<tbody role="alert" aria-live="polite" aria-relevant="all">
<?php
$query="SELECT * FROM tbl_product";
$sql_q=mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($sql_q))
{
$productid=$row['pid'];
$prodName= $row['product_name'];
$prodPrice= $row['product_price'];
$prodtype= $row['product_type'];
$prodQty= $row['product_qty'];
$description=$row['product_desc'];
?>
<tr class="odd">
<td class=" sorting_1"><?=$prodName?></td>
<td class="center "><?=$prodPrice?></td>
<td class="center "><?=$prodtype?></td>
<td class="center "><?=$prodQty ?></td>
<td class="center "><a class="btn btn-success" href="http://bootstrapmaster.com/live/simpliq2/table.html#"> <i class="fa fa-search-plus "></i> </a> <a class="btn btn-info" data-toggle="modal" data-target="#myModalDetail-<?=$productid?>" href="#myModalDetail"> <i class="fa fa-edit"></i> </a> <a class="btn btn-danger" href="http://bootstrapmaster.com/live/simpliq2/table.html#"> <i class="fa fa-trash-o "></i> </a></td>
</tr>
<div class="modal fade" id="myModalDetail-<?=$productid?>">
<?php require "edit_products.php"; ?>
</div>
<? } ?>
</tbody>
edit_products.php
<?php
$productid=$_REQUEST[$productid];
$query="SELECT * FROM tbl_product WHERE pid='".$productid."'";
$sql_q=mysql_query($query);
while($row = mysql_fetch_array($sql_q))
{
$productid=$row['pid'];
$prodName= $row['product_name'];
$prodPrice= $row['product_price'];
$prodtype= $row['product_type'];
$prodQty= $row['product_qty'];
$description=$row['product_desc'];
}
?>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Edit Products Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<form role="form" name="Insertdb" method="post" action="Insert_code/edit-products.php">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Name</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodName" value="<?=$prodName ?>">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Price</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodPrice" placeholder="Enter product price" value="<?=$prodPrice?>">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Type</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productType" placeholder="Enter product type">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Quanity</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productQty" placeholder="Enter product Quantity">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Upload Product Image</label>
</div>
</div>
<div class="col-lg-6">
<input type="file" name="productImg">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Description</label>
</div>
</div>
<div class="col-lg-6">
<textarea class="form-control" name="productDesc" rows="3"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input name="button1" type="submit" class="btn btn-primary">
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>