estoy intentando realizar una aplicación que lo que haga como añadir Divs hacia la izquierda a la vez escribiendo el nombre en Mysql. Lo estoy intentando con PHP y bootstrap pero se me antoja algo tosco con formularios. Pensé en hacerlo con Javascript pero no se por donde empezar. os dejo lo que llevo hecho para que podáis ver alguna idea.
<?php
include("../resources/config.php");
session_start();
$_SESSION["id_table"] = $_GET["id_table"];
if($_SERVER["REQUEST_METHOD"] == "POST") {
$inputTable = mysqli_real_escape_string($db,$_POST['inputName']);
foo($inputTable);
}
?>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>hola caracola</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="validation.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" >
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript" src="validation.js"></script>
<div class="container">
<div class="row">
<?php
function foo($nombre){
?>
<div class="col-sm-3-12">
<?php echo $nombre ?>
</div>
<?php
}
?>
<div class="col-sm-3-12">
<form action="" method="post">
<div class="form-group">
<label for="inputTable">Nombre tabla:</label>
<input type="text" class="form-control" id="inputTable" aria-describedby="" placeholder="Nombre tabla" name="inputName">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
lo que he intentado es con un form añadir con echo un nuevo div por encima pero no realiza la idea que quiero. tambien pense en hacerlo con refresh cada vez que creas un nuevo div pero no se ve muy dinámico.