Develop Reference

Dynamic cloning when creating boxes

I have an issue that I can't seem to resolve. Even though my current job does not call for integration, I have been doing a bit of it for a specific project.
BACKGROUND:
Basically, this is what I am currently working on: when I click on my fake button, it creates a box - more clicks, means more boxes which are created. However, the boxes need to be able to do one more thing than simply replicate - each one of them needs to allow me to drag and drop an image into them. So, if I click 5 times on the fake button, the 5 new boxes needs to allow me to drag and drop 5 different images. Currently, I have a box there by default (as a testing ground).
PROBLEM:
I cannot seem to duplicate the boxes correctly. I have tried several things, including switching classes to id's and what not to try and merge several pieces of coding together. Ultimately, I need to be able to place any images in the draggable boxes. 5 boxes, 5 images dragged into them etc.
NOTE 1:
I cannot use server-side coding, as I don't have access to the server. All of it has to be client side.
NOTE 2:
The images I bring in are from outside folders - from the desktop (dragged and dropped).
NOTE 3:
I watered down the code in the fiddle to only have the pieces of coding relevant to what I am attempting to do. However, the scripts there don't work within the fiddle, since I had to take them out of the environment. Though, they do work within the correct environment.
FIDDLE:
[My link] https://jsfiddle.net/t9dq3w28/10/
...

Changing Image Instances on Dynamic Web Form

I'm looking to put together a dynamic Web form where, when the customer selects options from a series of radio buttons, additional items will be added to the main image.
Think of it as if you had a Photoshop layer and all the other layers above could be hidden or revealed dependent on the customer's input on the form.
So, two questions...
I assume I should be using JavaScript for this form. Being a beginner with JavaScript, is there a way for me to tell it to change the image based on multiple inputs selected by the customer? The base image would be the same but I would be looking to hide/reveal multiple "overlays" on top of the base image.
Is this something that React can handle or should I be looking at something like Angular?
Thanks for your assistance with this question!

I can answer for number one by providing a live example: http://codepen.io/zvona/pen/mVQWvX
It consists of three components, FormControls, Blocks and App. Names are quite self-explanatory and so should be code itself. There may be some minor mistakes in code since it's quite quickly written on the fly, but it should give you insight on how this can be achieved with React.

Make a slider for hourly weather forecast

I am trying to make a weppage for hourly weather forecast. I have extracted data from an api and stored it in an array.
I want to display that data in a way that it shows 10 hours of forecast,with 5 entries being actively shown.I want to create a slider like this:
http://www.accuweather.com/en/au/melbourne/26216/hourly-weather-forecast/26216
I have stored the data in a table and now need to make it slide or make it in form of carousel.
i have searched on internet,but most of them are for images or are either plugins.
Can somene please help me to understand how to create this effect. I dont wana use plugin.

An incredibly simple approach would be to use JQuery Show and Hide.By default, you show the first view.On clicking the next button, you hide that view, and show another view.So on and so forth.
This is slightly crude, but does the job. Additionally, you cause use animations to transition them in and out.

Angularjs & bootstrap Datepicker, disable dates dynamically

I need to implement the following:
2 Datepickers with 2 consecutive months. The user can select a start- and an end-date.
Here is the tricky part that I can't figure out:
After selecting the start date I must enable/disable various dates.
From what I understand the disabled date are only fired once and the min-max only lets me select one range. However I need to disable/enable a multitude of dates.
I am very new to angular so I can't quite make heads or tails of the source yet.
I hope this is clear enough.
Also open to suggestions for a different datepicker directive that let's me do this. (Needs to able to default to open)

Rally App Disappears - Why?

I currently have an app that has five components. On the left I have a radio button field and a grid below it, on the right I have a display field, chart, and another grid [top to bottom]. The radio buttons filter every other component by a certain date, and the left grid [when selected] will filter the right components by the selected object.
Currently the app does what is needed, but when I select a few radio buttons in a row OR select a few objects in the grid, the app will eventually totally disappear. I tried running the app externally and internally with a custom HTML app, but the problem does not go away.
Here is a picture of the app before anything crashes:
Interestingly, when I look through the chrome debugger and look at the Elements tab, I see there are lots of masks that have been created and not destroyed. Here is a picture of a slight piece of the HTML that looks fishy and occurs after I select a few objects from the left grid:
Every time I select a new object, one more mask will be added to the DOM. I don't know if this is what breaks my app, but it seems odd so it may be related?
I didn't include any code because I thought it should be some easy fix - plus, the code does exactly what it should [before it disappears]. Any help on how to fix an app that disappears would be great!

In itself a mask sticking around to be reused after data loaded successfully is not an indication of a problem. I see mask being created and not destroyed in a simpler app:
Perhaps what you experience is an issue of timing when elements load asynchronously.