I'm working on an editable table and I need to dynamically adjust the width of a div whenever the content in a td changes. It seems like my jQuery code isn't doing the trick. Any suggestions on how to fix this issue?
var form = document.getElementById('form');
number = document.getElementById('number');
form.onchange = function() {
var variable = number.value;
var unit = "px";
var z = variable + unit;
$("#check").css("width", z);
};#check {
background-color: red;
height: 15px;
width: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<form id="form">
<input id="number" type="number" min="1" name="number">
</form>
<div id="check"></div>
</td>
</tr>
</table>