Here is the button code snippet:
<li class="cnt-li">
<button class="btn-container" title="Add Container" data-toggle="modal" data-target=".add-ctn-modal">
<img src="images/add.png" alt="Add Container">
</button>
</li>
This is the long modal div code snippet:
<div class="modal fade add-ctn-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" data-backdrop="false">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Add Container</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="ctn-num" class="control-label">Container Number:</label>
<input type="text" class="form-control" id="ctn-num">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="add_btn_modal" data-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>
When the button is clicked, the modal opens with an input box and an add button. The aim is to change the value inside a specific div to the entered value when clicking on add.
Below is the mentioned div where the value should be updated:
<div>
<label id="ctn-info-label">Container Number : <span class="container-no">0</span></label>
</div>
A script was written to achieve this behavior, but it only works from the second click onwards. Any suggestions to fix this issue would be helpful.
If you have any insights or changes to improve the functionality, please share them. Thank you!