How to create a unique iframe when you have side by side one

Question

Hi Team

 

I want to create a unique iframe, i have two side by side one and they are fine. I want to create this one after them as being unique. It needs to have switch button inside it, please see my code below for clarity. 

 

<!---iframes for both temp, illuminance and button-state.

--->

<br/>

<div class = "box">

<iframe src="https://thingspeak.com/channels/929272/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15" frameborder="0" scrolling="no" width="100%" height="250" >

</iframe>

</div>

<div class="box">

<iframe src="https://thingspeak.com/channels/929272/charts/2?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15" frameborder="0" scrolling="no" width="100%" height="250" align="right">

</iframe>

</div>

<br/>

<div class = "row">

<div class = "col-md-4">

<div class = "iframe-container">

<iframe src="https://thingspeak.com/channels/929272/charts/8?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15" frameborder="0" scrolling="no" width="100%" height="250" align = "middle">

</iframe>

</div>

</div>

</div>

<div class="clear">

</div>

<!----Toggle button for switching On/Off when is clicked.

---->

<div class = "wrapper" align = "center">

<div class="btn-group" id="toggle_event_editing">

<button type="button" class="btn btn-danger locked_active">OFF</button>

<button type="button" class="btn btn-success unlocked_inactive">ON</button>

</div>

<div class="alert alert-info" id="switch_status">Switched off.</div>

</div>

<br/>