I am currently developing an insertion form that adds a product to a [ products draft ]. This involves working with two tables: one named ( Drafts ) and the other named ( items ). Each item in the "items" table has a corresponding draft ID associated with it.
When a new draft is being inserted, the user must provide the number of products to be added to the draft. Once the quantity is specified, the application triggers a sequence of forms to insert each individual product (based on the determined quantity) using jQuery. These product forms are dynamically inserted into a Bootstrap 4 carousel as ( carousel-item ) elements through the use of the append function. Additionally, each form includes a navigation bar displaying the current form number out of the total amount (e.g., 1 / 50). My query relates to identifying the specific DOM element to which I should append my code, as my initial attempts have been unsuccessful.
Code Snippet:
<?
include("..\include\basket-module.php");
// notifications //
include("..\\include\\notif-module.php");
// module //
include("..\\include\\Insert-module.php");
?>
<html>
<!-- various CSS and JavaScript libraries included -->
<body>
<!-- Various included modules such as navbar and basket sidebar -->
<!-- Main body content including the dynamic form insertion logic within a carousel -->
</body>
</html>A subsequent issue arises when attempting to append multiple new (carousel-items), resulting in only one active item being displayed despite multiple insertions. The updated snippet contains additional details to troubleshoot this problem.