Extract value from child div using JQuery and update text in another section of the page

Here is a fiddle showcasing the concept I am working on: https://jsfiddle.net/wvz9p3e7/1/

The code is written in PHP and involves a loop for cycling through 7 or 8 different garments. My goal is to have the window on the right side of the fiddle display the correct Garment Id and Base Price when one of the boxes is clicked.

I have successfully implemented the garment ID functionality, but now I am struggling with how to make JavaScript find the base price and populate the text on the right-hand side.

$(document).ready(function() {
            $(".garment-select").click(function(event) {
                $("#garmentID").text(event.target.id);
                $(".garment-select").not(this).removeClass('selectecGarment');
                $(this).toggleClass( "selectecGarment" );
            });

            $(".garmentPanel > .").click(function(event) {
                $("#garmentID").text(event.target.id);
            });
        });

Answer №1

There are a variety of ways you can tackle this issue. Let's start with a simple solution:

$(".clothingPanel").on("click", function() {
     $("#itemID").text($(this).attr('id'));
     $("#itemPrice").text($(this).find('.itemPrice').text());
});

To see the code in action, check out this example

Answer №2

If you need to fetch the price, you can utilize this jQuery code snippet -

$('#garmentBasePrice').html($(this).next().next().text());

JSFiddle Example

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transmitting a plethora of information using jQuery

Here's the code I currently have for sending data: var test={imagename:"apple.jpg",x:"13",y:"33"}; $.ajax({ type: "POST", url: "some.php", data: test, success: function(response){ console.log(response); } }); ...

Managing the movement of text in the Skitter slideshow with Wordpress plugins

I'm currently utilizing the SKitter slideshow plugin on my WordPress website. This plugin displays an image along with a label that includes a description for each image. The label transitions in and out upon changing to a new image. Is there a way ...

What is the best way to reveal CSS files downloaded via npm?

I'm currently working on a Sass/CSS library that I have hosted on npm. I am exploring ways to make it easier for clients to access it, such as using: @import 'library_name' Instead of the less appealing option: @import 'node-modules/ ...

What is the best way to make a flexbox stretch to fill the entire screen

Can someone guide me on how to ensure my flexbox expands to fill the entire screen? I am working on a website and I want to eliminate any empty spaces from it. >> https://i.sstatic.net/uAooe.png I have attempted setting margin and padding to zero b ...

Utilize JavaScript to extract and exhibit various SQL records stored within a multidimensional array

How can I use JS, JQuery, PHP, and MySQLi to automatically generate an HTML table within a div on a webpage? The table should display data based on user-input search criteria. For example, the user enters a start date and end date, clicks a button, which t ...

What is the reasoning behind placing the CSS file in the header section and the JS file at the bottom

Hey there, I need some help. Why is the CSS file included in the header section but the JS file at the end of the page? Can I also include the CSS file at the bottom of the page? <!DOCTYPE html> <html> <head> <link type= ...

Ajax Live Search Error Detected

Having trouble retrieving data from the database..! <html> <head> <title>Live Search</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> &l ...

Is there a light font that cannot be replicated?

I attempted to replicate the font style used in this website's menu, but after implementing it into my WordPress CSS theme, the text still appears bold. Is there a particular technique I can use to achieve the lighter version of the font? I have loade ...

"What is the best way to prevent a button from being enabled in Angular if a list or array is not

I am incorporating data from my service in the component: ngOnInit() { this._sharedService. getReceiptItem().takeUntil(this.ngUnsubscribe). subscribe(products => this.receiptItems = products); } Is there a way to deactivate a button if there ...

Troubleshooting the issue with the <div> tag in ASP.NET MVC 2 and the "float: left;" property. Any solutions to

Issue with the usage of <div> elements Everything runs smoothly: Text "Whatever" appears in column 1, followed by a radio button: No issues here (text without a radio button): The cell immediately following the text "Whatever" should display in co ...

Unlimited Page Scrolling with Functional Browser Back Button using jQuery

My e-commerce website features an infinite scroll function that works smoothly. However, there's an issue with the back button functionality for customers previewing products - they have to start over when navigating back on pages with 100+ products. ...

Clicking on Google Code Prettify does not trigger syntax highlighting

I utilize Google Code Prettify for syntax highlighting my code. Below is the HTML snippet I use: <head> <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> </head> <body> ...

The SetData function eliminates CKEditor event handlers

I've come across a piece of code that's been causing me some confusion: CKEDITOR.instances.myInstance.document.on('keyup', function(event) { if(event.keyCode == 13) { $('linkId').click( ...

An efficient approach to populating a dropdown menu with array values using jquery

Here is an array that I am working with: var serviceArray= new Array("Living Room","Dining Room","Bedroom(s)","Family Room","Kitchen","Den","Hallway(s)","Ste(s)","Bathroom","Landing(s)"); I am looking to populate the options of a select tag with these v ...

What differences occur in JavaScript when the IE Developers Tools are accessed?

When the IE Developers Tools are opened, what changes in terms of running an AJAX application? I am currently investigating a mysterious bug related to PrimeFaces dropdown lists in Internet Explorer. Sometimes these dropdowns do not open when clicked, but ...

What causes ngb-tabset to reset to the first tab upon being hidden and then shown again?

I have implemented ngb-tabset within a component that is contained within a single div. This div element is conditionally displayed based on the value of a specific condition. If the condition evaluates to false, another section is shown instead. <div * ...

Python requests no longer retrieves HTML content

I am trying to extract a name from a public Linkedin URL using Python requests (2.7). Previously, the code was functioning correctly. import requests from bs4 import BeautifulSoup url = "https://www.linkedin.com/in/linustorvalds" html = requests.get(url ...

Display checkboxes on all TableRow elements as soon as one of them is checked

I've incorporated a material-ui Table into my project and have successfully implemented multi-select functionality. Here are the requirements I've fulfilled so far: Checkboxes are initially hidden - COMPLETED Hovering over a row reveals its che ...

How do I submit a form using jQuery .ajax() or .post() in a native iPhone Phonegap application?

Can someone help me figure out how to use jQuery's .ajax() or .post() in a Phonegap Native iPhone App to send data to a php file on my webserver? Do I need to format the data as xml or json, or can I simply send regular html post data? If anyone has ...

What is the process to set a Woocommerce checkout field as optional when a checkbox is marked?

I need assistance with customizing the checkout page on Wordpress Woocommerce. Specifically, I want to make the field 'billing_name' not required if the checkbox 'buy_on_company' is checked. Currently, I have successfully hidden ' ...