I'm creating an image selection page and wanted to click on choose the number for the input and if it clicks again it leaves the input because there will be several fts chosen body
<?php
session_start();
if(!isset($_SESSION['tkm'])){
$redirect = "index.php";
header("location:$redirect");
}else{
include 'conn.php';
$tkm=$_SESSION['tkm'];
$sql="SELECT id FROM 'usuario' WHERE tkm='$tkm'";
$executar= mysqli_query($link,$sql);
$num= mysqli_num_rows($executar);
if($num == 1){
while($show=mysqli_fetch_array($executar)){
$id=$show['id'];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Selecionar Fotos</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarColor01" style="">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="sair.php">sair</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<?php
$sql="SELECT foto FROM 'foto' WHERE usuario=$id";
$executar= mysqli_query($link,$sql);
//$num= mysqli_num_rows($executar);
$i=0;
while($show=mysqli_fetch_array($executar)){
$foto=$show['foto'];
$i++;
?>
<div class="col-xs-12 col-md-3 col-lg-3 col-xs-3 col-sm-3">
<div class="select zoom">
<img src="<?php echo $foto; ?>" onclick="imgZ('mostrar');AplI('<?php echo $foto; ?>');" >
<img class="veisto" src="visto.png" id="<?php echo $i; ?>" >
</div>
<button onclick="escolha('<?php echo $i; ?>');marcar('<?php echo $i; ?>')">escolher</button>
</div>
<?php
}
?>
<form action="" method="post">
<input type="text" name="escolidos" id="escolidos">
<input type="submit" value="enviar">
</form>
</div>
</div>
<div id="mostrar" class="mostrar">
<img src="x.png" class="img-fechar" onclick="imgF('mostrar')" title="fechar">
<center>
<div id="zoomimg" class="img"></div>
</center>
</div>
<script src="div.js"></script>
</body>
</html>
<?php
}else{
$redirect = "sair.php";
header("location:$redirect");
}
?>
<?php
}
?>
javascript
function imgZ(el){
document.getElementById(el).style.display="block";
}
function AplI(el){
document.getElementById('zoomimg').innerHTML=" <img src=\""+ el +"\" class=\" AplI \">";
}
function imgF(el){
document.getElementById(el).style.display="none";
}
function escolha(el){
var visto = document.getElementById(el).style.display;
if(visto == "none")
document.getElementById(el).style.display="block";
else
document.getElementById(el).style.display="none";
}
function marcar(el){
var visto = document.getElementById(el).style.display;
if(visto == "none")
document.getElementById('escolidos').value += el+"%";
else
document.getElementById('escolidos').value -= el;
}