Adding new element to page - javascript

So, I'm pretty new to react so I'm still not quite sure what I'm doing. I had a project that used purely HTML, JQuery, and CSS but I'm trying to convert it to react. I have a page with checkboxes and when they are clicked a div is added with links inside of it and if unchecked the div is removed:
if(element.checked != false) {
$('.links').append('<div id="social">\
<p>\
Instagram\n\
<button type="button" id="instagram" onclick="removeInstagram()">-</button>\
</p>\
<p>\
Facebook\n\
<button type="button" id="facebook" onclick="removeFacebook()">-</button>\
</p>\
<p>\
Twitter\n\
<button type="button" id="twitter" onclick="removeTwitter()">-</button>\
</p>\
<p>\
Youtube\n\
<button type="button" id="youtube" onclick="removeYoutube()">-</button>\
</p>\
</div>');
}
else if(element.checked != true) {
$("#social").remove();
}
I'm trying to turn this into React inside a component but I'm not sure if I'm doing it right. I have the function linked to my checkbox but I don't know how to add/remove the links when clicked:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { findDOMNode } from "react-dom";
import $ from "jquery";
export default class LoginPage extends Component {
render() {
return (
<div id="container">
<section className="presets">
<div>
<label for="item1">Social Media:</label>
<input
type="checkbox"
name="item1"
id="item1"
onChange={this.socialMedia.bind(this)}
/>
</div>
<div>
<label for="item2">Tech:</label>
<input
type="checkbox"
name="item2"
id="item2"
onChange="toggleTech(this)"
/>
</div>
<div>
<label for="item3">Sports:</label>
<input
type="checkbox"
name="item3"
id="item3"
onChange="toggleSports(this)"
/>
</div>
<div>
<label for="item4">News:</label>
<input
type="checkbox"
name="item4"
id="item4"
onChange="toggleNews(this)"
/>
</div>
<div>
<label for="item5">Games:</label>
<input
type="checkbox"
name="item5"
id="item5"
onChange="toggleGames(this)"
/>
</div>
<div>
<label for="item3">School:</label>
<input
type="checkbox"
name="item6"
id="item6"
onChange="toggleSchool(this)"
/>
</div>
<div>
<button
type="button"
id="custom"
onClick="customHandler(this)"
>
Add Custom Site
</button>
</div>
</section>
<section className="links"></section>
</div>
);
}
// Social(element) {
// if (element.checked != false) {
// $(".links").append(
// '<div id="social">\
// <p>\
// Instagram\n\
// <button type="button" id="instagram" onclick="removeInstagram()">-</button>\
// </p>\
// <p>\
// Facebook\n\
// <button type="button" id="facebook" onclick="removeFacebook()">-</button>\
// </p>\
// <p>\
// Twitter\n\
// <button type="button" id="twitter" onclick="removeTwitter()">-</button>\
// </p>\
// <p>\
// Youtube\n\
// <button type="button" id="youtube" onclick="removeYoutube()">-</button>\
// </p>\
// </div>'
// );
// } else if (element.checked != true) {
// $("#social").remove();
// }
// }
}
Any help with this would be appreciated, I am using the MERN stack for this.


Try this with func comp and useState
export const LoginPage = () => {
const [isChecked, setIsChecked] = useState(false);
return (
<div id="container">
<section className="presets">
<div>
<label for="item1">Social Media:</label>
<input
type="checkbox"
name="item1"
id="item1"
onChange={() => setIsChecked(!isChecked)}
/>
</div>
<div>
<label for="item2">Tech:</label>
<input
type="checkbox"
name="item2"
id="item2"
onChange="toggleTech(this)"
/>
</div>
<div>
<label for="item3">Sports:</label>
<input
type="checkbox"
name="item3"
id="item3"
onChange="toggleSports(this)"
/>
</div>
<div>
<label for="item4">News:</label>
<input
type="checkbox"
name="item4"
id="item4"
onChange="toggleNews(this)"
/>
</div>
<div>
<label for="item5">Games:</label>
<input
type="checkbox"
name="item5"
id="item5"
onChange="toggleGames(this)"
/>
</div>
<div>
<label for="item3">School:</label>
<input
type="checkbox"
name="item6"
id="item6"
onChange="toggleSchool(this)"
/>
</div>
<div>
<button
type="button"
id="custom"
onClick="customHandler(this)"
>
Add Custom Site
</button>
</div>
</section>
<section className="links">
{isChecked ? <div id="social">
<p>
Instagram
<button type="button" id="instagram" onclick="removeInstagram()">-</button>\
</p>
<p>
Facebook
<button type="button" id="facebook" onclick="removeFacebook()">-</button>\
</p>
<p>
Twitter
<button type="button" id="twitter" onclick="removeTwitter()">-</button>\
</p>
<p>
Youtube
<button type="button" id="youtube" onclick="removeYoutube()">-</button>\
</p>
</div> : null }
</section>
</div>
);
}


You should use state and ternary expression. should be something like this:
And you should not change the DOM with jquery while you are working with react.
import React, { Component } from "react";
export default class LoginPage extends Component {
constructor(){
super();
this.state ={
isElementChecked: false
}
}
render() {
return (
<div id="container">
<section className="presets">
<div>
<label for="item1">Social Media:</label>
<input
type="checkbox"
name="item1"
id="item1"
checked={this.state.isElementChecked}
onChange={this.setState({isElementChecked: !this.state.isElementChecked})}
/>
</div>
<div>
<label for="item2">Tech:</label>
<input
type="checkbox"
name="item2"
id="item2"
onChange="toggleTech(this)"
/>
</div>
<div>
<label for="item3">Sports:</label>
<input
type="checkbox"
name="item3"
id="item3"
onChange="toggleSports(this)"
/>
</div>
<div>
<label for="item4">News:</label>
<input
type="checkbox"
name="item4"
id="item4"
onChange="toggleNews(this)"
/>
</div>
<div>
<label for="item5">Games:</label>
<input
type="checkbox"
name="item5"
id="item5"
onChange="toggleGames(this)"
/>
</div>
<div>
<label for="item3">School:</label>
<input
type="checkbox"
name="item6"
id="item6"
onChange="toggleSchool(this)"
/>
</div>
<div>
<button
type="button"
id="custom"
onClick="customHandler(this)"
>
Add Custom Site
</button>
</div>
</section>
<section className="links">
{this.state.isElementChecked? <div id="social">
<p>
Instagram
<button type="button" id="instagram" onclick="removeInstagram()">-</button>\
</p>
<p>
Facebook
<button type="button" id="facebook" onclick="removeFacebook()">-</button>\
</p>
<p>
Twitter
<button type="button" id="twitter" onclick="removeTwitter()">-</button>\
</p>
<p>
Youtube
<button type="button" id="youtube" onclick="removeYoutube()">-</button>\
</p>
</div> : null}
</section>
</div>
);
}
}

Related

Removing readonly attribute inside 3 divs

i am creating a to-do list, i want the user to be able to edit and delete the added tasks, this will be possible by removing readonlyattribute from HTML. but i am struggling doing the edit function.
Here is my code:
const formulario=document.getElementById("new-task-form");
const lista=document.getElementById("list");
const input=document.querySelector("#new-task-input");
let id=0;
formulario.addEventListener('submit', (e)=>{
//console.log("activado");
e.preventDefault();
addTask();
});
let addTask=()=>{
id++;
let task=input.value;
lista.innerHTML+=`<div id="tasks">
<div class="task" id="taskin">
<div class="content" id="${id}">
<input
id="${id}"
type="text"
class="text"
value=${task}
readonly
/>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div>
</div> `
input.value='';
}
lista.addEventListener('click', (evento)=>{
console.log(evento);
if(evento.target.className=="edit"){
console.log("Editar");
}else if(evento.target.className=="delete"){
console.log("Borrar");
}
})
<body>
<header>
<h1>Task List</h1>
<form action="#" id="new-task-form"> <!--Formulario para poner tareas-->
<input type="text" id="new-task-input" placeholder="Que vas a hacer" />
<input type="submit" id="new-task-submit" value="Add Task" />
</form>
</header>
<main>
<div id="list" class="task-list">
<h2>Tasks</h2>
<div id="tasks">
<!-- <div class="task">
<div class="content">
<input type="text"
class="text"
value="My Task"
readonly
/>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div> -->
</div>
</div>
</main>
<script src="app.js"></script>.
</body>
</html>
Thanks in advance :D

I have added some lines to your JS code. Please check.
lista.addEventListener('click', (evento)=>{
let parentEl = evento.target.parentNode.parentNode;
let input = parentEl.getElementsByTagName('input');
if(evento.target.className=="edit"){
console.log("Editar");
input[0].removeAttribute('readonly');
}else if(evento.target.className=="delete"){
console.log("Borrar");
}
})
Test it in the Snippet below:
const formulario=document.getElementById("new-task-form");
const lista=document.getElementById("list");
const input=document.querySelector("#new-task-input");
let id=0;
formulario.addEventListener('submit', (e)=>{
//console.log("activado");
e.preventDefault();
addTask();
});
let addTask=()=>{
id++;
let task=input.value;
lista.innerHTML+=`<div id="tasks">
<div class="task" id="taskin">
<div class="content" id="${id}">
<input
id="${id}"
type="text"
class="text"
value=${task}
readonly
/>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div>
</div> `
input.value='';
}
lista.addEventListener('click', (evento)=>{
let parentEl = evento.target.parentNode.parentNode;
let input = parentEl.getElementsByTagName('input');
console.log(input[0]);
if(evento.target.className=="edit"){
input[0].removeAttribute('readonly');
console.log("Editar");
}else if(evento.target.className=="delete"){
console.log("Borrar");
}
})
<body>
<header>
<h1>Task List</h1>
<form action="#" id="new-task-form"> <!--Formulario para poner tareas-->
<input type="text" id="new-task-input" placeholder="Que vas a hacer" />
<input type="submit" id="new-task-submit" value="Add Task" />
</form>
</header>
<main>
<div id="list" class="task-list">
<h2>Tasks</h2>
<div id="tasks">
<!-- <div class="task">
<div class="content">
<input type="text"
class="text"
value="My Task"
readonly
/>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div> -->
</div>
</div>
</main>
<script src="app.js"></script>.
</body>
</html>
Hope it helps.

First, 2 elements have the same id 's value :
<div class="content" id="${id}"> and <input id="${id}">
You can change same as :
const formulario=document.getElementById("new-task-form");
const lista=document.getElementById("list");
const input=document.querySelector("#new-task-input");
let id=0;
formulario.addEventListener('submit', (e)=>{
//console.log("activado");
e.preventDefault();
addTask();
});
let addTask=()=>{
id++;
let task=input.value;
lista.innerHTML+=`<div id="tasks">
<div class="task" id="taskin">
<div class="content" id="${id}">
<input
id="input-${id}"
type="text"
class="text"
value=${task}
readonly
/>
</div>
<div class="actions">
<button class="edit" data-task_id="input-${id}">Edit</button>
<button class="delete" data-task_id="input-${id}">Delete</button>
</div>
</div>
</div> `
input.value='';
}
lista.addEventListener('click', (evento)=>{
if(evento.target.className=="edit"){
document.getElementById(evento.target.dataset.task_id).removeAttribute('readonly');
}else if(evento.target.className=="delete"){
document.getElementById(evento.target.dataset.task_id).remove();
}
})
<body>
<header>
<h1>Task List</h1>
<form action="#" id="new-task-form"> <!--Formulario para poner tareas-->
<input type="text" id="new-task-input" placeholder="Que vas a hacer" />
<input type="submit" id="new-task-submit" value="Add Task" />
</form>
</header>
<main>
<div id="list" class="task-list">
<h2>Tasks</h2>
<div id="tasks">
<!-- <div class="task">
<div class="content">
<input type="text"
class="text"
value="My Task"
readonly
/>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div> -->
</div>
</div>
</main>
<script src="app.js"></script>.
</body>
</html>

Maybe you mean remove the readonly attribute on textbox inside the three divs?
$('.edit').click(function(){
$('.first_div input, .second_div input, .third_div input').removeAttr('readonly');
});
$('.edit_first').click(function(){
$('#first_textbox').removeAttr('readonly');
});
$('.edit_second').click(function(){
$('#second_textbox').removeAttr('readonly');
});
$('.edit_third').click(function(){
$('#third_textbox').removeAttr('readonly');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="first_div">
<input readonly id="first_textbox">
</div>
<div class="second_div">
<input readonly id="second_textbox">
</div>
<div class="third_div">
<input readonly id="third_textbox">
</div>
<button class="edit">Edit All</button>
<button class="edit_first">Edit first textbox</button>
<button class="edit_second">Edit second textbox</button>
<button class="edit_third">Edit third textbox</button>

Why can't my React Component find an element?

I have a Component that causes an error, "TypeError: Cannot read property 'value' of null". It's nested inside of another component, and makes that component not load.
This is the code:
const NewItem = (props) => {
const qty = "QuantityBox" + props.identifier.toString();
const prc = "PriceBox" + props.identifier.toString();
return(
<div className="NewItem">
<div className="ItemNameInput">
<p className="InputLabel">Item Name</p>
<input className="inputFull" type="text" />
</div>
<div className="QuantityAndPrice">
<div className="QuantityInput">
<p className="InputLabel">Qty</p>
<input className="inputEighth" value="1" id={qty} type="text" />
</div>
<div className="PriceInput">
<p className="InputLabel">Price</p>
<input className="inputFourth" value="0" id={prc} type="text" />
</div>
<div className="TotalOutput">
<p className="InputLabel">Total</p>
<h4 className="TotalAmount">{(document.getElementById(qty).value * document.getElementById(prc).value).toFixed(2)}</h4>
</div>
<img src={TrashCan} alt="Delete" />
</div>
</div>
)
}
Right in the "TotalAmount" h4, is where the problem arises. If I remove that part, it loads up just fine. Judging from the error, it can't find the elements I'm specifying, but I don't understand why. I don't know if it has anything to do with the parent component, but I'll put it here just in case:
class NewInvoice extends Component {
constructor(props) {
super(props)
this.state = {
numberOfItems: [0]
};
}
createItem = () => {
this.setState(prevState => ({numberOfItems: [...prevState.numberOfItems, (this.state.numberOfItems.length - 1)]}));
}
render() {
return(
<div className="NewInvoice">
<button onClick={() => this.props.goBackInvoiceList()} className="goBack">Go back</button>
<h1>New Invoice</h1>
<form>
<p className="FormAreaLabel">Bill From</p>
<div className="BillFrom">
<div className="StreetAddressInput">
<p className="InputLabel">Street Address</p>
<input className="inputFull" type="text" />
</div>
<div className="HalfInput">
<div className="CityInput">
<p className="InputLabel">City</p>
<input className="inputHalf" type="text" />
</div>
<div className="PostCodeInput">
<p className="InputLabel">Post Code</p>
<input className="inputHalf" type="text" />
</div>
</div>
<div className="NewCountryInput">
<p className="InputLabel">Country</p>
<input className="inputFull" type="text" />
</div>
</div>
<div className="BillTo">
<div className="ClientNameInput">
<p className="InputLabel">Client's Name</p>
<input className="inputFull" type="text" />
</div>
<div className="ClientEmailInput">
<p className="InputLabel">Client's Email</p>
<input className="inputFull" type="text" />
</div>
<div className="ClientStreetAddressInput">
<p className="InputLabel">Street Address</p>
<input className="inputFull" type="text" />
</div>
<div className="HalfInput">
<div className="ClientCityInput">
<p className="InputLabel">City</p>
<input className="inputHalf" type="text" />
</div>
<div className="ClientPostCodeInput">
<p className="InputLabel">Post Code</p>
<input className="inputHalf" type="text" />
</div>
</div>
<div className="ClientCountryInput">
<p className="InputLabel">Country</p>
<input className="inputFull" type="text" />
</div>
</div>
<div className="OtherInfo">
<div className="InvoiceDateInput">
<p className="InputLabel">Invoice Date</p>
<input className="inputFull" type="text" />
</div>
<div className="PaymentTermsInput">
<p className="InputLabel">Payment Terms</p>
<input className="inputFull" type="text" />
</div>
<div className="ProjectDescriptionInput">
<p className="InputLabel">Project Description</p>
<input className="inputFull" type="text" />
</div>
</div>
<h3 className="ItemListTitle">Item List</h3>
<div className="ItemList">
{this.state.numberOfItems.map((index) =>
<NewItem key={index} identifier={index} />
)}
<button onClick={() => this.createItem()} className="AddNewItem">+ Add New Item</button>
</div>
</form>
<div className="NewInvoiceEndButtons">
<button className="Discard">Discard</button>
<button className="SaveAsDraft">Save As Draft</button>
<button className="SaveAndSend">Save And Send</button>
</div>
</div>
)
}
}

This is happening because in the h4 line that you specified, you are trying to retrieve a DOM node with the id "QuantityBox" + props.identifier.toString(). Your code is unable to retrieve a DOM element with a matching id, causing document.getElementById(qty) to return null. null doesn't have any properties, so document.getElementById(qty).value is throwing an error specifiying that it cant access property value of null.
Also, if you want to manipulate DOM elements directly, the React way is to use React Refs. You should be able to achieve your desired result with that.
Read more on Refs here: https://reactjs.org/docs/refs-and-the-dom.html

jQuery - Assign the click function to the radio input

What I would like to do is assign both the checked value and the click function to the radio input located inside the parent div.
I currently have this code but it only works for assigning the checked value. The click () function does not work:
<div id="contPosition">
<div class="contPosition">
<input type="radio" class="posPrint1" />
</div>
<div class="contPosition">
<input type="radio" class="posPrint2" />
</div>
<div class="contPosition">
<input type="radio" class="posPrint3" />
</div>
</div>
</div>
</div>
<div id="contPrintPosition">
<div class="contPrintPosition">
<input type="radio" class="posPrint1" />
</div>
<div class="contPrintPosition">
<input type="radio" class="posPrint2" />
</div>
<div class="contPrintPosition">
<input type="radio" class="posPrint3" />
</div>
</div>
</div>
</div>
<script>
jQuery('.contPosition').click(function () {
var val = $(this).find('input:radio').prop('checked')?false:true;
$(this).find('input:radio').prop('checked', val);
});
//THIS FUNCTION DOES NOT WORK AS EXPECTED
jQuery('.contPosition input').click(function(){
var curCls = $(this).attr('class');
$(`.contPrintPosition > input.${curCls}`).val("Test");
});
//THIS FUNCTION DOES NOT WORK AS EXPECTED
jQuery('.contPosition input[type=radio]').click(function(){
if (this.previous) {
this.checked = false;
}
this.previous = this.checked;
});
</script>

I dont know what you want to achieve exactly but only one click event could replace all the other event as below snippet :
$(function() {
//should be ".contPosition input[type=radio]"
$('.contPosition input[type=radio]').click(function(e) {
var curCls = $(this).attr('class');
$(`.contPrintPosition > input.${curCls}`).val("Test");
if (this.previous) {
this.checked = false;
}
this.previous = this.checked;
});
})
.contPrintPosition input::after {
content: attr(value);
width:100%;
margin-left:15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contPosition">
<div class="contPosition">
<input type="radio" class="posPrint1" />
</div>
<div class="contPosition">
<input type="radio" class="posPrint2" />
</div>
<div class="contPosition">
<input type="radio" class="posPrint3" />
</div>
</div>
<div id="contPrintPosition">
<div class="contPrintPosition">
<input type="radio" class="posPrint1" />
</div>
<div class="contPrintPosition">
<input type="radio" class="posPrint2" />
</div>
<div class="contPrintPosition">
<input type="radio" class="posPrint3" />
</div>
</div>

Replace option of Select with Checkbox

Good morning, I am trying to replace the options of each Select the check box to be able to give a better style and improve the functionality that it fulfills but when changing it for Check box it does not fulfill the function that it does with the option, The function that it fulfills is the Search for selected tags in each Select, It is for Blogger.
I am looking to get you to click on the selected checkbox in each Select. But I have not been successful, I hope you can help me, thank you very much!
<div class="tabs-outer">
<div class="tabs-cap-top cap-top">
<div class="cap-left"></div>
<div class="cap-right"></div>
</div>
<div class="fauxborder-left tabs-fauxborder-left">
<div class="fauxborder-right tabs-fauxborder-right"></div>
<div class="region-inner tabs-inner">
<div class="tabs section" id="crosscol">
<div class="widget HTML" id="HTML3">
<h2 class="title">Buscador Avanzado</h2>
<div class="widget-content">
<div id="multi-search">
<select class="cmbColumn" id="cmbColumn" name="cmbColumn[]" multiple>
<input type="Checkbox" name="cmbColumn[]" value="acción+" />1
<input type="Checkbox" name="cmbColumn[]" value="TV" /> TV
<input type="Checkbox" name="cmbColumn[]" value="TV" /> TV
<input type="Checkbox" name="cmbColumn[]" value="TV" /> TV
</select>
<select class="cmbSidebar" id="cmbSidebar" name="cmbSidebar[]" multiple>
<input type="checkbox" name="cmbSidebar[]" value="TV+" />1
<input type="checkbox" name="cmbSidebar[]" value="TV" /> TV
<input type="checkbox" name="cmbSidebar[]" value="TV" /> TV
<input type="checkbox" name="cmbSidebar[]" value="TV" /> TV
<input type="checkbox" name="cmbSidebar[]" value="TV" /> TV
</select>
<select class="cmbColor" id="cmbColor" name="cmbColor[]" multiple>
<input type="checkbox" name="cmbColor[]" value="TV" />1
<input type="checkbox" name="cmbColor[]" value="TV" /> TV
<input type="checkbox" name="cmbColor[]" value="TV" /> TV
</select>
<input class="filtro" onclick=" getValue() " value="Filtrar" type="button" />
</div>
</div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="//www.blogger.com/rearrange?blogID=4472703516037708465&widgetType=HTML&widgetId=HTML3&action=editWidget&sectionId=crosscol" onclick=" return _WidgetManager._PopupConfig(document.getElementById("HTML3")); " target="configHTML3" title="Edit">
<img alt="" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" height="18" width="18" />
</a>
</span>
</span>
<div class="clear"></div>
</div>
</div>
<div class="tabs section" id="crosscol-overflow"></div>
</div>
</div>
<div class="tabs-cap-bottom cap-bottom">
<div class="cap-left"></div>
<div class="cap-right"></div>
</div>
<script type="text/javascript">
function getValue() {
var valcmbColumn = document.getElementById("cmbColumn").value;
valcmbSidebar = document.getElementById("cmbSidebar").value;
valcmbColor = document.getElementById("cmbColor").value;
valOutput = (valcmbColumn + valcmbSidebar + valcmbColor);
window.open("/search/label/" + valOutput, "_self");
}
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == "block") {
e.style.display = "none";
} else {
e.style.display = "block";
}
}
</script></div>

As mentioned by Scott Marcus, you would have to make your own drop down component to add checkmarks to a sort of select.
Something like this:
Just make the span element look like a select option and make it clickable instead of on hover if you so desire.
You could also style the selections div to your own liking.
.selections{
transform:scaleY(0);
transition: all 0.5s;
transform-origin:top;
height:0;
}
.selector{
cursor:pointer;
}
.selector:hover .selections{
transform:scaleY(1);
height:auto;
border: 1px solid red;
width:200px;
margin-top:5px;
}
<div class="selector"><span style="border:1px solid red">Hover me and style me as select</span>
<div id="selections" class="selections">
<input type="checkbox" value="Something" /> Something <br />
<input type="checkbox" value="Something" /> Something <br />
<input type="checkbox" value="Something" /> Something <br />
<input type="checkbox" value="Something" /> Something <br />
<input type="checkbox" value="Something" /> Something <br />
</div>
</div>

Show/hide list selecting all instead of individually

I have the following code, which shows and hides elements according to buttons being clicked:
HTML:
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail1.jpg" alt="thumbNail1.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton">
<input type="button" value="Click to Rename" />
</div>
<div class="cancelRenameButton">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" >
<input type="submit" value="Rename" />
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail2.jpg" alt="thumbNail2.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton">
<input type="button" value="Click to Rename" />
</div>
<div class="cancelRenameButton">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" >
<input type="submit" value="Rename" />
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
CSS:
.galleryButtonContainer .cancelRenameButton {display:none;}
.galleryButtonContainer .renameButton {display:none;}
JQUERY:
$(".editButton").click(function () {
$(".renameButton,.cancelRenameButton").show();
$(".editButton").hide();
});
$(".cancelRenameButton").click(function () {
$(".renameButton,.cancelRenameButton").hide();
$(".editButton").show();
});
The problem I'm getting is I can't get the buttons to work individually. I've tried using 'this' without success

You can simply use siblings (less function calls!) in combination with this to traverse the DOM and then just toggle them away (or keep hide and show if you prefer).
JSFiddle here
$(".editButton").click(function () {
$(this).toggle().siblings(".renameButton,.cancelRenameButton").toggle();
});
$(".cancelRenameButton").click(function () {
$(this).toggle().siblings(".renameButton,.cancelRenameButton").toggle();
});

Try something like this:
$(".editButton").click(function () {
$(this).parents(".largeImage").find(".renameButton,.cancelRenameButton").show();
$(this).parents(".largeImage").find(".editButton").hide();
});
$(".cancelRenameButton").click(function () {
$(this).parents(".largeImage").find(".renameButton,.cancelRenameButton").hide();
$(this).parents(".largeImage").find(".editButton").show();
});

If I understood properly what u want to do. This can be a possible solution:
HTML:
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail1.jpg" alt="thumbNail1.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton" name="form1">
<input type="button" value="Click to Rename"/>
</div>
<div class="cancelRenameButton" name="form1">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" name="form1">
<input type="submit" value="Rename"/>
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail2.jpg" alt="thumbNail2.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton" name="form2">
<input type="button" value="Click to Rename" />
</div>
<div class="cancelRenameButton" name="form2">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" name="form2">
<input type="submit" value="Rename" />
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
CSS:
.galleryButtonContainer .cancelRenameButton {display:none;}
.galleryButtonContainer .renameButton {display:none;}
jQuery:
$(".editButton, .cancelRenameButton").click(function () {
Toggle($(this));
});
function Toggle(obj){
var name = obj.attr("name");
$(".renameButton[name="+name+"],.cancelRenameButton[name="+name+"]").toggle();
$(".editButton[name="+name+"]").toggle();
}
Check this link jsfiddle to see a how it works.
A better solution would be, I think, remove the divs and deal only with buttons.
Hope it useful!

Categories